DigitalFlare
Call: 0843 289 5840

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/or dynamic (thus the word "flex").

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 (without specifying sizes or added lots of media queries). A flex container expands items to fill available free space, or shrinks them to prevent overflow. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.mportantly, 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 the ability to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

Importantly, 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 lack the ability to support large or complex applications (especially when it comes to 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...