+ 
+ 
+ Welcome to la petit ecole
++This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. + +.container { + flex-direction: row | row-reverse | column | column-reverse; +} + + row (default): left to right in ltr; right to left in rtl + row-reverse: right to left in ltr; left to right in rtl + column: same as row but top to bottom + column-reverse: same as row-reverse but bottom to top + +flex-wrap +two rows of boxes, the first wrapping down onto the second + +By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. + +.container { + flex-wrap: nowrap | wrap | wrap-reverse; +} + + nowrap (default): all flex items will be on one line + wrap: flex items will wrap onto multiple lines, from top to bottom. + wrap-reverse: flex items will wrap onto multiple lines from bottom to top. + +There are some visual demos of flex-wrap h + + +
++This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. + +.container { + flex-direction: row | row-reverse | column | column-reverse; +} + + row (default): left to right in ltr; right to left in rtl + row-reverse: right to left in ltr; left to right in rtl + column: same as row but top to bottom + column-reverse: same as row-reverse but bottom to top + +flex-wrap +two rows of boxes, the first wrapping down onto the second + +By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. + +.container { + flex-wrap: nowrap | wrap | wrap-reverse; +} + + nowrap (default): all flex items will be on one line + wrap: flex items will wrap onto multiple lines, from top to bottom. + wrap-reverse: flex items will wrap onto multiple lines from bottom to top. + +There are some visual demos of flex-wrap h + + +
++This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. + +.container { + flex-direction: row | row-reverse | column | column-reverse; +} + + row (default): left to right in ltr; right to left in rtl + row-reverse: right to left in ltr; left to right in rtl + column: same as row but top to bottom + column-reverse: same as row-reverse but bottom to top + +flex-wrap +two rows of boxes, the first wrapping down onto the second + +By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. + +.container { + flex-wrap: nowrap | wrap | wrap-reverse; +} + + nowrap (default): all flex items will be on one line + wrap: flex items will wrap onto multiple lines, from top to bottom. + wrap-reverse: flex items will wrap onto multiple lines from bottom to top. + +There are some visual demos of flex-wrap h + + +
++This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. + +.container { + flex-direction: row | row-reverse | column | column-reverse; +} + + row (default): left to right in ltr; right to left in rtl + row-reverse: right to left in ltr; left to right in rtl + column: same as row but top to bottom + column-reverse: same as row-reverse but bottom to top + +flex-wrap +two rows of boxes, the first wrapping down onto the second + +By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. + +.container { + flex-wrap: nowrap | wrap | wrap-reverse; +} + + nowrap (default): all flex items will be on one line + wrap: flex items will wrap onto multiple lines, from top to bottom. + wrap-reverse: flex items will wrap onto multiple lines from bottom to top. + +There are some visual demos of flex-wrap h + + +
++This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. + +.container { + flex-direction: row | row-reverse | column | column-reverse; +} + + row (default): left to right in ltr; right to left in rtl + row-reverse: right to left in ltr; left to right in rtl + column: same as row but top to bottom + column-reverse: same as row-reverse but bottom to top + +flex-wrap +two rows of boxes, the first wrapping down onto the second + +By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. + +.container { + flex-wrap: nowrap | wrap | wrap-reverse; +} + + nowrap (default): all flex items will be on one line + wrap: flex items will wrap onto multiple lines, from top to bottom. + wrap-reverse: flex items will wrap onto multiple lines from bottom to top. + +There are some visual demos of flex-wrap h + + +
++This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. + +.container { + flex-direction: row | row-reverse | column | column-reverse; +} + + row (default): left to right in ltr; right to left in rtl + row-reverse: right to left in ltr; left to right in rtl + column: same as row but top to bottom + column-reverse: same as row-reverse but bottom to top + +flex-wrap +two rows of boxes, the first wrapping down onto the second + +By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. + +.container { + flex-wrap: nowrap | wrap | wrap-reverse; +} + + nowrap (default): all flex items will be on one line + wrap: flex items will wrap onto multiple lines, from top to bottom. + wrap-reverse: flex items will wrap onto multiple lines from bottom to top. + +There are some visual demos of flex-wrap h + + +
++This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. + +.container { + flex-direction: row | row-reverse | column | column-reverse; +} + + row (default): left to right in ltr; right to left in rtl + row-reverse: right to left in ltr; left to right in rtl + column: same as row but top to bottom + column-reverse: same as row-reverse but bottom to top + +flex-wrap +two rows of boxes, the first wrapping down onto the second + +By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. + +.container { + flex-wrap: nowrap | wrap | wrap-reverse; +} + + nowrap (default): all flex items will be on one line + wrap: flex items will wrap onto multiple lines, from top to bottom. + wrap-reverse: flex items will wrap onto multiple lines from bottom to top. + +There are some visual demos of flex-wrap h + + +
++This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. + +.container { + flex-direction: row | row-reverse | column | column-reverse; +} + + row (default): left to right in ltr; right to left in rtl + row-reverse: right to left in ltr; left to right in rtl + column: same as row but top to bottom + column-reverse: same as row-reverse but bottom to top + +flex-wrap +two rows of boxes, the first wrapping down onto the second + +By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. + +.container { + flex-wrap: nowrap | wrap | wrap-reverse; +} + + nowrap (default): all flex items will be on one line + wrap: flex items will wrap onto multiple lines, from top to bottom. + wrap-reverse: flex items will wrap onto multiple lines from bottom to top. + +There are some visual demos of flex-wrap h + + +
++This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. + +.container { + flex-direction: row | row-reverse | column | column-reverse; +} + + row (default): left to right in ltr; right to left in rtl + row-reverse: right to left in ltr; left to right in rtl + column: same as row but top to bottom + column-reverse: same as row-reverse but bottom to top + +flex-wrap +two rows of boxes, the first wrapping down onto the second + +By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. + +.container { + flex-wrap: nowrap | wrap | wrap-reverse; +} + + nowrap (default): all flex items will be on one line + wrap: flex items will wrap onto multiple lines, from top to bottom. + wrap-reverse: flex items will wrap onto multiple lines from bottom to top. + +There are some visual demos of flex-wrap h + + +
++This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. + +.container { + flex-direction: row | row-reverse | column | column-reverse; +} + + row (default): left to right in ltr; right to left in rtl + row-reverse: right to left in ltr; left to right in rtl + column: same as row but top to bottom + column-reverse: same as row-reverse but bottom to top + +flex-wrap +two rows of boxes, the first wrapping down onto the second + +By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. + +.container { + flex-wrap: nowrap | wrap | wrap-reverse; +} + + nowrap (default): all flex items will be on one line + wrap: flex items will wrap onto multiple lines, from top to bottom. + wrap-reverse: flex items will wrap onto multiple lines from bottom to top. + +There are some visual demos of flex-wrap h + + +
++This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. + +.container { + flex-direction: row | row-reverse | column | column-reverse; +} + + row (default): left to right in ltr; right to left in rtl + row-reverse: right to left in ltr; left to right in rtl + column: same as row but top to bottom + column-reverse: same as row-reverse but bottom to top + +flex-wrap +two rows of boxes, the first wrapping down onto the second + +By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. + +.container { + flex-wrap: nowrap | wrap | wrap-reverse; +} + + nowrap (default): all flex items will be on one line + wrap: flex items will wrap onto multiple lines, from top to bottom. + wrap-reverse: flex items will wrap onto multiple lines from bottom to top. + +There are some visual demos of flex-wrap h + + +
+ +
+
+
+