What is flexbox? Commonly referred to as flexbox, it's real name is flexible box layout module. It provides a more efficient way to lay out, align, and distribute space among child elements of a parent element, even when their size and quantity is unknown or dynamic. Flexbox defines a whole new layout mode.
Traditionally, there is block mode, which was designed for document layout. There is inline mode, which was designed for text; table mode, which was designed for tabular data (tables); and positioned mode, which was designed for explicit positioning without much regard for other elements around it. Now there is flexbox mode. So what does flexbox do? It can do a lot of really useful things. At the core, flexbox is for layout and alignment. The following list illustrates its more common use cases:
- Layout of elements vertically...