{"id":21059,"date":"2013-04-08T11:46:57","date_gmt":"2013-04-08T18:46:57","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=21059"},"modified":"2022-12-09T07:25:13","modified_gmt":"2022-12-09T15:25:13","slug":"a-guide-to-flexbox","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/","title":{"rendered":"A Complete Guide to Flexbox"},"content":{"rendered":"\n
\n
\n

Table of contents<\/h4>\n\n\n
    \n
  1. <\/a>Background<\/a><\/li>\n\n\n\n
  2. <\/a>Basics and terminology<\/a><\/li>\n\n\n\n
  3. <\/a>Flexbox properties<\/a><\/li>\n\n\n\n
  4. <\/a>Prefixing Flexbox<\/a><\/li>\n\n\n\n
  5. <\/a>Examples<\/a><\/li>\n\n\n\n
  6. <\/a>Flexbox tricks<\/a><\/li>\n\n\n\n
  7. <\/a>Browser support<\/a><\/li>\n\n\n\n
  8. <\/a>Bugs<\/a><\/li>\n\n\n\n
  9. <\/a>Related properties<\/a><\/li>\n\n\n\n
  10. <\/a>More information<\/a><\/li>\n\n\n\n
  11. More sources<\/a><\/li>\n<\/ol>\n<\/div><\/div>\n<\/div>\n\n\n\n
    \n

    Get the poster!<\/h4>\n\n\n
    \n
    \n

    Reference this guide a lot? Here’s a high-res image you can print! <\/p>\n\n\n\n

    \n
    Download Free<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
    \n\n\n\n
    \n \n

    Background<\/h3>\n <\/summary>\n \n\n

    The Flexbox Layout<\/code> (Flexible Box) module (a W3C Candidate Recommendation<\/a> as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and\/or dynamic (thus the word “flex”).<\/p>\n\n\n\n

    The main idea behind the flex layout is to give the container the ability to alter its items’ width\/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.<\/p>\n\n\n\n

    Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).<\/p>\n\n\n\n

    Note:<\/strong> Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid<\/a> layout is intended for larger scale layouts.<\/p>\n\n\n<\/details>\n\n\n

    \n \n

    Basics and terminology<\/h3>\n <\/summary>\n \n\n

    Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).<\/p>\n\n\n\n

    If “regular” layout is based on both block and inline flow directions, the flex layout is based on “flex-flow directions”. Please have a look at this figure from the specification, explaining the main idea behind the flex layout.<\/p>\n\n\n\n

    \"A<\/figure>\n\n\n\n

    Items will be laid out following either the main axis<\/code> (from main-start<\/code> to main-end<\/code>) or the cross axis (from cross-start<\/code> to cross-end<\/code>).<\/p>\n\n\n\n