4729923, 805 AM ‘AComplete Guide to Flexbox | CSS-Trcks - CSS-THcks HOME GUIDES A Complete Guide to Flexbox Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart. Table of contents Part I (#aa-introduction) Background (#aa-background) Part 2: (#aa-introduction) Basics and terminology (#aa-basics-and-terminology) Part 3: (#aa-introduction) Flexbox properties (#aa-flexbox-properties) Part 4 (#an-introduction) Prefixing Flexbox (#a-prefixing-‘lexbox) ‘Part S: (#aa-introduction) Examples (#aa-examples) Part 6: (#a2-introduction) Flexbox tricks (#aa-flexbox-tricks) Part 7: (#aa-introduction) Browser support (#aa-browser-support) Part 8: (#aa-introduction) Bugs (#aa-bugs) Part 9: (#aa-introduction) Related properties (#as-related-properties) Part 10: (#aa-introduction) More information (#aa-more-information) Part 11: More sources (#a2-more-sources) Get the poster! E = qui Reference this guide a lot? Here's a high-res image you can print! hitpsess-icks.com/snippetsiss/a-quide-o-lexbox! wm4129923, 805 AM ‘ACompete Guide to Flexbox | CSS-Trcks -CSS-Trcks DOWNLOAD FREE (HTTPSi//CSS-TRICKS,COM/WP-CONTENT/UPLOADS/2022/02/CSS-FLEXBOX-POSTER.PNG) t#aa-background) Background +faa-basics-and-terminology) Basies and terminology tiaa-flexbox-properties) Flexbox properties container, (#aa-properties-for-the-parentflex-container) Properties for the Parent (flex container) (aa-display) display ‘This defines a flex container; inline or block depending on the given value, It enables a flex ‘context for all its direct children. centaten ( apie! fens /* or tnaneftee */ ? [Note that CSS columns have no effect on a flex container. (#aa-flex-direction) flex-direction nps:ifss-tricks.comisippetsiesslaguide-tofNexbox! an4729923, 805 AM ‘ACompete Guide to Flexbox | CSS-Trcks -CSS-Trcks ‘This establishes the main-axis, thus defining the direction flex items are placed inthe 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. centaior ( , © row (default): left to right in Ltr; right to left in rt © row-reverse: right to left in Ltr; left to right in rt © colunn: same as row but top to bottom © colunn-reverse: same as row-reverse but bottom to top (#aa-flex-wrap) flex-wrap 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. centainor ( , © nowrap (default): all flex items will be on one line ‘= weap: 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 here (https:fess- wicks,com/almanac/properties/f/flex-wrap/) (#aa-flex-flow) flex-flow ‘This a shorthand for the Flex-direction and flex-wrap properties, which together define the flex container's main and cross axes, The default value is row nowrap. nps:ifss-tricks.comisippetsiesslaguide-toflexbox! an4129923, 805 AM AComplete Guide to Flexbox | CSS-Trcks -CSS-Trcks centatner ( , (#aa-justify-content) justify-content fiex-start flexend center space-between space-around space-evenly ‘This defines the alignment along the main axis. Ithelps distribute extra free space leftover ‘when either all the flex items on a line are inflexible, or are flexible but have reached their ‘maximum size, It also exerts some control over the alignment of items when they overflow the line. contain ( Susseycontens: floeetart | Flescens | contr | space-peraees | spacearune | epace-venly | stare | na | eft | Meht = eae [umes > © Flex-start (default) items are packed toward the start ofthe lex-direction. + Mlex-ende items ate packed toward the end of the Nex-direction, * start: items are packed toward the stat of the writing-node direction, * end: items are packed toward the end ofthe writing-rode direction. © Lett: items are packed toward left edge of the containes unless that doesn’t make sense with, the Flex-dtrection, then it behaves like start. + rights tems are packed toward right edge ofthe container, unless that doesnt make sense withthe Flex-direction then‘tbehaves ike end S nps:ifss-tricks.comisippetsiesslaguide-toflexbox! ann4729923, 805 AM ‘ACompete Guide to Flexbox | CSS-Trcks -CSS-Trcks © center: isems are centered along the line * space-between: items are evenly distributed in the lin; first item is on the start line, last item onthe end line ‘© space-around: items are evenly distributed in the line with equal space around them. Note that, visually the spaces aren't equal, since all the items have equal space on both sides. The first ‘tem will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. © space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal [Note that that browser support for these values is nuanced. For example, space-between never got support from some versions of Edge, and start/end/left/right aren't in Chrome yet. MD hhas detailed charts (https:f{developer.mozilla org/en-US/docs/ Web/CSS/justify-content) . The safest values are flex-start, flex-end, and center. ‘There are also wo additional keywords you can pair with these values: safe and unsafe, Using safe ensures that however you do this typeof positioning, you cant push an element such that Itrenders offscreen (eg. off the top in such a way the content cant be scrolled too (called “data loss") (#aa-align-items) align-items flex-start flex-end center stretch baseline ‘This defines the default behavior for how flex items are laid out along the eross axis on the ‘current line, Think of tas the justi fy-content version for the cross-axis (perpendicular to the main-axis). “Dante eth | eat | so Ucn ie | et ing [at oe at Lon ain act «. @ nps:ifss-tricks.comisippetsiesslaguide-toflexbox! sit4129923, 805 AM ‘ACompete Guide to Flexbox | CSS-Trcks -CSS-Trcks , © stretch (default): stretch to fil the container (still respect min-width/max-width) © #lex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rales. © #lex-end / end /sel#-ends items are placed at the end of the cross axis, The difference again is subtle and is about respecting flex-direction rules vs. witing-rode rules, © center: isems are centered in the cross-axis ‘© baseline: items are aligned such as their baselines aliga, ‘The safe and unsafe modifier keywords can be used in conjunction with all the rest of these keywords (although note browser support (https://developer.mozilla.org/en- US/docs/Web/CSS/align-items) ), and deal with helping you prevent aligning elements such that the content becomes inaccessible. (¥aa-align-content) align-eontent flex-start flex-end center stretch space-between _space-around ‘This aligns a flex container's lines within when there is extra space in the cross-axi, similar to how justi fy-content aligns individual items within the main-axis. reverse. Aseletine Bebe cosine Le whare ere isto de ae ce-ari) wot eta container ( sso | spec [ste srt Leone |e wees nps:ifss-tricks.comisippetsiesslaguide-toflexbox! an4129923, 805 AM ‘ACompete Guide to Flexbox | CSS-Trcks -CSS-Trcks , © normal (default): items are packed in their default position as fo value was set. © Flex-start / stant: items packed to the start ofthe container. The (more supported) Flex- start honors the Flex-direction while start honors the weiting-node direction. + Flex-end / end: items packed to the end ofthe container. The (more support) flex-end honors the Flex-atrection while end honors the writing-node direction. © center: items centered in the container © space-between: items evenly distributed; the first lin is atthe start of the container while the last one is atthe end «© space-around: items evenly distributed with equal space around each line © space-evenly: items are evenly distributed with equal space around them © stretch: lines stretch to take up the remaining space ‘The safe and unsafe modifier keywords can be used in conjunction with all the rest of these keywords (although note browser support (hitps,/developernozlla.org/en- US/docs/Web/CSS/align-items) ), and deal with helping you prevent aligning elements such that the content becomes inaccessible. (aa-gap-row-gap-eolumn-gap) gap, row-gap, column-gap gap: 1px gap: 30px gap: 1px 30px ‘The gap property (https:/ess-tricks.com/almanae/properties/g/gap/) explicitly controls the that spacing only between items not on the outer edges. space between flex items. It appl centainer ( eet on 6 nps:ifss-tricks.comisippetsiesslaguide-toflexbox! mM4129923, 805 AM ‘ACompete Guide to Flexbox | CSS-Trcks -CSS-Trcks > ‘The behay (because of something like justify-content: space-between;) then the gap will only take effect if that space would end up smaller. ‘could be thought of as a minimum gutter, as ifthe gutter is bigger somehow It is not exclusively for flexbox, gap works in grid and multi-column layout as wel. items<— (#aa-properties-for-the-childrenflex-items) Properties for the Children (flex items) (#aa-order) order Toho ye a [4 py 5 PA 99 By default, flex items are laid out in the source order. However, the onder property controls the ‘order in which they appear in the flex container. seen ¢ eer: 5: /*aeaute ts 87 , Items with the same order revert to source order. (#aa-flex-grow) flex-grow nps:ifss-tricks.comisippetsiesslaguide-toflexbox! ant4729923, 805 AM ‘ACompete Guide to Flexbox | CSS-Trcks -CSS-Trcks ‘This defines the ability fora flex item to grow ifnecessary. It accepts a unitless value that serves as a proportion. It dictates what amount ofthe available space inside the flex container the item should take up. fall items have fLex-grow set to 2, the remaining space inthe container will be distributed ‘equally to all children. Ifone of the children has a value of 2, that child would take up twice as ‘much ofthe space either one of the others (or it will try, atleast). sen escrow 4 / defeat @ 97 , ‘Negative numbers are invalid. (#2a-flex-shrink) flex-shrink ‘This defines the ability for a flex item to shrink if necessary. sen ¢ Fhesesiines 85 depo 3 7 , Negative numbers are invalid, (#aa-flex-basis) flex-basis ‘This defines the default size of an clement before the remaining space is distributed, Itean be & length (e.g. 20%, Stem, etc.) ora keyword, The auto keyword means “look at my width or height property” (which was temporarily done by the main-size keyword until deprecated). ‘The content keyword means “size it based on the item's content” ~ this keyword isn’t well, supported yet, so i's hard to test and harder to know what its brethren nax-content, nin content, and fit-content do, sen ¢ lsenates | ates /* jolt ute 7 > nps:ifss-tricks.comisippetsiesslaguide-toflexbox! om4729723, 805 AM ‘AComplete Guide to Flxbox | CSS-rcks -CSS-Trcks If set to, the extra space around content isn't factored in. Ifset to auto, the extra space is distributed based on its f1ex-grow value, See this graphic. (htp://wwww3.org/TR/ess3- fexbox/imagesfrel-vs-abs-flex.s¥g) (#aa-flex) flex ‘This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (#1ex-shrink and flex-basis) are optional. The default is @ 1 auto, butif you set it with a single number value, like Flex: 55, that changes the flex-basis to 0%, so it's like setting flex-grow: flex-shrink: 15 flex-basis: 0%. Fle: ane LL cflscern's «fener? [| eFtecbasts’> 1 , Itis recommended that you use this shorthand property rather than set the individual properties, The shorthand sets the other values intelligent, (#aa-align-self) align-self flex-start flex-end ‘This allows the default alignment (or the one specified by align-itens) to be overridden for individual flex items. Please see the align-itens explanation to understand the available values. sen ¢ siigietlfs site | Aaeatact | Qecend | center | bzehie | stator > Note that Float, clear and vertical-align have no effect on a flex item. tH#aa-prefixing-flexbox) Prefixing Flexbox nps:ifss-tricks.comisippetsiesslaguide-tofNexbox! son4729923, 805 AM ‘AComplete Guide to Flexbox | CSS-Trcks - CSS-THcks ‘ Examples * Flexbox tricks! » Browser support » Bugs » Related properties ® More information » More sources hitpsiess-rcks.comisnippeis/ssla-quide-o-exbox! nm