block<\/strong><\/code> (vertical) and inline<\/strong><\/code> (horizontal) objects, flex<\/code> objects can be ordered in two directions<\/strong>, and can also expand<\/strong> to fill available space and shrink<\/strong> to prevent overflow.<\/p>\n\n\n\n\nIn the flex layout model, the children of a flex container can be laid out in any direction, and can \u201cflex\u201d their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.<\/p>\nW3C<\/a><\/cite><\/blockquote>\n\n\n\n\nA Complete Guide to Flexbox<\/a><\/div>\n\n\n\nReference Chart<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n\nFree Flexbox Course<\/a><\/div>\n\n\n\nFree Flexbox Course Reference Files<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\nFlex Containers and Flex Items<\/h2>\n\n\n\n
Some flexbox CSS properties are added to parent items (flex containers<\/strong>) while others are to be used on children (flex items<\/strong>).<\/p>\n\n\n\nThe Flex Container<\/h2>\n\n\n\n
If \u201cregular\u201d float-based layout is based on both block and inline flow directions<\/em>, the flex layout is based on flex-flow directions<\/em>. This figure explains the main idea behind the flex layout.<\/p>\n\n\n\n![\"Figure](\"https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2019\/02\/flex-directions.png\")
<\/figure>\n\n\n\n\n- main axis<\/strong> – The primary axis along which flex items are placed. Direction may not always be horizontal, depending on the
flex-direction<\/code>property.<\/li>\n\n\n\n- main-start | main-end<\/strong> – Flex items appear within the container starting from main-start and going to main-end.<\/li>\n\n\n\n
- main size<\/strong> – A flex item’s width or height, whichever is in the main dimension.<\/li>\n\n\n\n
- cross axis<\/strong> – The axis perpendicular to the main axis. Its direction depends on the main axis direction.<\/li>\n\n\n\n
- cross-start | cross-end<\/strong> – Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.<\/li>\n\n\n\n
- cross size<\/strong> – The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size property.<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nCSS Properties for Flex Containers<\/h2>\n\n\n\n\n- display<\/a><\/li>\n\n\n\n
- flex-direction<\/a><\/li>\n\n\n\n
- flex-wrap<\/a><\/li>\n\n\n\n
- flex-flow<\/a><\/li>\n\n\n\n
- justify-content<\/a><\/li>\n\n\n\n
- align-items<\/a><\/li>\n\n\n\n
- align-cont<\/a>ent<\/a><\/li>\n\n\n\n
- gap, row-gap, column-gap<\/a><\/li>\n<\/ul>\n\n\n\n
display<\/h3>\n\n\n\n
\u2014 defines a container as being flex, inline or block (default). All children will behave as flex items<\/strong>.<\/p>\n\n\n\n.container {\n<\/span> display<\/span>:<\/span> flex;<\/span>\n<\/span>}<\/pre>\n\n\n\n
\n\n\n\nflex-direction<\/h3>\n\n\n\n
\u2014 establishes the main-axis<\/strong>, defining the direction flex items appear in the flex container, either in horizontal rows or vertical columns. The cross-axis<\/strong> direction crosses the main-axis. For example, if the direction is row<\/code>, and by default points left to right, the cross-axis is top to bottom.<\/p>\n\n\n\n.container {\n flex-direction: row | row-reverse | column | column-reverse;\n}<\/pre>\n\n\n\n\nrow<\/strong><\/code> (default \u2014 you can leave this property out and direction will default to row): left to right<\/li>\n\n\n\nrow-reverse<\/strong><\/code>: right to left <\/li>\n\n\n\ncolumn<\/strong><\/code>: same as row<\/code> but top to bottom<\/li>\n\n\n\ncolumn-reverse<\/strong><\/code>: same as row-reverse<\/code> but bottom to top<\/li>\n<\/ul>\n\n\n\n![\"Flex-direction:](\"https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2022\/09\/image-1.png\")
<\/figure>\n\n\n\n![\"flex-direction:column\"](\"https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2022\/09\/image-3.png\")
<\/figure>\n\n\n\n
\n\n\n\nflex-wrap<\/h3>\n\n\n\n
\u2014 default behavior is for all items to try to fit in one line. This can be overridden by the flex-wrap<\/code> property:<\/p>\n\n\n\n.container {\n flex-wrap<\/span>:<\/span> nowrap | wrap | wrap-reverse;<\/span>\n}<\/pre>\n\n\n\n\nnowrap<\/code> – (default behavior): all flex items will be on one line<\/li>\n\n\n\nwrap<\/code> – flex items will wrap onto multiple lines, from top to bottom.<\/li>\n\n\n\nwrap-reverse<\/code> – flex items will wrap onto multiple lines from bottom to top.<\/li>\n<\/ul>\n\n\n\n![\"flex-wrap\"](\"https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2022\/09\/image-8.png\")
<\/figure>\n\n\n\nNote<\/strong>: Flex will attempt to accommodate your item widths, but it will narrow the items to fit when set to nowrap<\/code> .<\/p>\n\n\n\nAlso note<\/strong>: flex items will stretch to fill their parent’s height, unless given their own height, or if wrap<\/code> is applied.<\/p>\n\n\n\nflex-flow<\/h3>\n\n\n\n
This combined both flex-direction<\/code> and flex-wrap<\/code> into one property, which together define the flex container\u2019s main and cross axes. The default value is row nowrap<\/code>.<\/p>\n\n\n\n.container { \n flex-flow: column wrap; \n}<\/code><\/pre>\n\n\n\n
\n\n\n\njustify-content<\/h3>\n\n\n\n
\u2014 determines distribution along the main-axis.<\/p>\n\n\n\n
.container {\n justify-content:<\/span> flex=start | flex-center | flex-end\u2026 ;\n}<\/pre>\n\n\n\n\nflex-start<\/code> (default): items gathered toward the start of the flex-direction.<\/li>\n\n\n\ncenter<\/code>: items centered together along the line.<\/li>\n\n\n\nflex-end<\/code>: items gathered toward the end of the flex-direction.<\/li>\n\n\n\nspace-between<\/code>: distributes items evenly in the line; from the start line to the end line.<\/li>\n\n\n\nspace-around<\/code>: distributes items evenly in the line with equal space around before and after the item.<\/li>\n\n\n\nspace-evenly<\/code>: items distributed so that the spacing between any two items (and the space to the edges) is equal.<\/li>\n<\/ul>\n\n\n\n![\"Examples](\"https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2022\/09\/image-6.png\")
<\/figure>\n\n\n\nNote<\/strong>: when using flex-direction: column<\/code>, the parent container must have a height set, otherwise items will fill the space vertically.<\/p>\n\n\n\n
\n\n\n\nalign-items<\/h3>\n\n\n\n
\u2014 determines how flex items are distributed along the cross-axis. For example, when using flex-direction: row<\/code>, align-items works vertically (perpendicular to the main-axis.)<\/p>\n\n\n\n.container {\n align-items:<\/span> stretch | flex-start | flex-end | center | baseline<\/span><\/span>\u2026 ;<\/pre>\n\n\n\n\nstretch<\/code> (default): stretch to fill the container’s height.<\/li>\n\n\n\nflex-start<\/code>: items are placed at the start of the cross-axis.<\/li>\n\n\n\nflex-end<\/code>: items are placed at the end of the cross-axis.<\/li>\n\n\n\ncenter<\/code>: items are centered in the cross-axis.<\/li>\n\n\n\nbaseline<\/code>: items are aligned according to their baselines, especially useful for text.<\/li>\n<\/ul>\n\n\n\n![\"Visualization](\"https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2023\/02\/align-items3.png\")
<\/figure>\n\n\n\nNote<\/strong>: Parent containers must have a defined height for align-items<\/code> to function properly.<\/p>\n\n\n\n
\n\n\n\nalign-content<\/h3>\n\n\n\n
\u2014 determines how a container’s lines are distributed when there are multiple lines of code and extra space in the cross-axis.<\/p>\n\n\n\n
.container {\n align-content:<\/span> stretch | flex-start | flex-end | center | baseline<\/span><\/span>\u2026 ;\n}<\/pre>\n\n\n\n\n- normal (default): items are packed in their default position as if no value was set.<\/li>\n\n\n\n
flex-start<\/code>: items packed to the start of the container. <\/li>\n\n\n\nflex-end<\/code> : items packed to the end of the container. <\/li>\n\n\n\ncenter<\/code>: items centered in the container.<\/li>\n\n\n\n- space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end.<\/li>\n\n\n\n
- space-around: items evenly distributed with equal space around each line.<\/li>\n\n\n\n
- stretch: lines stretch to take up the remaining space.<\/li>\n<\/ul>\n\n\n\n
![\"align-content\"](\"https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2022\/09\/image-10.png\")
<\/figure>\n\n\n\ngap, row-gap, column-gap<\/h3>\n\n\n\n
\u2014controls the space between flex items. It applies that spacing only between items<\/em> not on the outer edges.<\/p>\n\n\n\n.container { <\/code>\n display: flex;<\/code>\n gap: 10px; <\/code>\n gap: 10px 20px; \/* row-gap column gap *\/<\/em> <\/code>\n row-gap: 10px; <\/code>\n column-gap: 20px; <\/code>\n}<\/code><\/pre>\n\n\n\n
\n\n\n\nCSS Properties for Flex Items<\/h2>\n\n\n\n\n- order<\/a><\/li>\n\n\n\n
- align-self<\/a><\/li>\n\n\n\n
- flex (flex-grow, flex-shrink, flex-basis)<\/a><\/li>\n<\/ul>\n\n\n\n
order<\/h3>\n\n\n\n
\u2014 by default flex items appear in the order they are written in html. You can alter the order of one or more items by setting an order value:<\/p>\n\n\n\n
.item {
order:<\/span> 1; \/* default is 0 *\/
}<\/pre>\n\n\n\n![\".item3](\"https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2022\/09\/image-4.png\")
<\/figure>\n\n\n\nalign-self<\/h3>\n\n\n\n
\u2014 allows individual flex items to be assigned an alignment different from the alignment set for the container..<\/p>\n\n\n\n
.item {\n align-self:<\/span> auto | flex-start | flex-end | center | baseline | stretch; }<\/pre>\n\n\n\n![\"align-self\"](\"https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2022\/09\/image-11.png\")
<\/figure>\n\n\n\nflex (flex-grow, flex-shrink, flex-basis)<\/h3>\n\n\n\n.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}<\/code><\/pre>\n\n\n\n.item1 {
flex: 10 5 400px;
}<\/code><\/pre>\n\n\n\n\u2014 Used when you have too much space or not enough space for your items. Sets an item to expand or shrink a proportionate amount. <\/p>\n\n\n\n
flex-grow<\/code> \u2014 Defines proportionally how much a flex item can grow to fill excess space if necessary. It accepts a unitless value that serves as a proportion. Default is 0.<\/p>\n\n\n\nflex-shrink<\/code> \u2014 Defines proportionally how much a flex item can shrink to fit into a narrower space, if necessary. Default is 1.<\/p>\n\n\n\nflex-basis<\/code> \u2014 Defines the default size of an element before the remaining space is distributed. Default is auto.<\/p>\n\n\n\nflex<\/code> \u2014 the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto.<\/p>\n\n\n\nMore Flex Learning Resources<\/h2>\n\n\n\n