A Guide to the CSS Flexbox

The new CSS Flexbox Layout (Flexible Box) module 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 dynamic (thus the word "flex").

The main idea behind the flex layout is to allow the container to alter its items' width/height (and order) to fill the available space best (without specifying sizes or adding lots of media queries). A flex container expands items to fill open free space or shrinks them to prevent overflow. For many applications, the flexible box model improves over the block model in that it does not use floats, nor does the flex container's margins collapse with the margins of its contents. Notably, 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 cannot support large or complex applications (especially regarding orientation changing, resizing, stretching, shrinking, etc.).

Notably, the flexbox layout is also '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 cannot support large or complex applications (especially regarding orientation changing, resizing, stretching, shrinking, etc.).

W3C Schools provides an excellent guide to the selectors here: https://www.w3schools.com/css/css3_flexbox.asp, which carefully explains the use of each, but we have highlighted some visually below in this diagram:

We also stumbled upon many YouTube videos, but we found this one the most useful and easiest to digest...