Flexbox is a CSS box model that allows for the simple implementation of complex layouts. As opposed to the CSS2 layout modules such as block, inline, table, and positioned, Flexbox is designed to allow a layout to make the most use out of the available space, through a set of simple rules. The W3C Candidate Recommendation, 19 October 2017 (https://www.w3.org/TR/css-flexbox-1/) explains the flex layout as follows:
- Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return, it gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need. The contents of a flex container are as follows:
- Can be laid out in any flow direction (leftward, rightward, downward, or even upward!)
- Can have their display order reversed or rearranged at the style layer (that is, visual order can be independent...