Flexbox is officially called "CSS Flexible Box Layout Module Level 1" by W3C [
w3.org...] It's so new that it's scarcely been mentioned on WebmasterWorld, but it's clearly a coming thing for CSS layout and deserves some attention. Apparently, it will be "optionally" supported by Bootstrap 4, and I trust the mods will allow me to post a link to a tutorial in these notes below.
The model is described by W3C as...
...a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
I'm by no means a CSS expert... quite the contrary... so I was delighted to come across the following introductory guide, which is clear enough that even I could get a very good visual idea of how Flexbox will work. I think that some aspects of Flexbox will be familiar to anyone remembering positioning and alignment in HTML table cells.
A Visual Guide to CSS3 Flexbox Properties Dimitar Stojanov - April 13, 2015 [
scotch.io...]
...The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.
Many designers and developers find this flexbox layout easier to use, as positioning of the elements is simpler thus more complex layouts can be achieved with less code, leading to simpler development process....
...This flexbox layout should be used for small application components, while new CSS Grid Layout Module is emerging to handle the large scale layouts.
PS: I should note that spelling not yet standardized in wide usage... I've also seen it as Flex Box and Flex-Box. The article uses both the single word and two word variant, I'm guessing to catch search, and I'm mentioning it so our content doesn't become invisible.
