Flexbox (display:flex) is a new variant to build a grid of a website and is now used in many current browsers. See CanIUseIt
Flexbox replaces the floating approach and additionally solves minor problems.
How do I use Flexbox?
For a Parent/Container the display property is set to display:flex;. This causes all child elements to be displayed next to each other in a row.
All properties for Parent/Container:
• flex-direction • justify-content • align-items • flex-wrap • flex-flow • align-content
Flexbox returns table properties for divs. By default flex-wrap: nowrap; is enabled.
-> 15 child elements are displayed in one row and do not break unless otherwise specified.
For child elements you can specify a pixel width, for responsive you usually use a ratio (e.g. flex:1 2 3 etc.) or a base (e.g. flex-base: 25%).
All properties for child elements:
• order • flex • flex-basis • flex-grow • flex-shrink • align-self
Example 1: Main Content with Three Columns
The order of elements can be displayed differently than it is specified in the HTML code (very practical for Responsive Layouts and SEO). In HTML code, the “main content” comes before the “left navigation” and the “related column”.
With the property order:1; we can change the order of the child elements!
Example 2: Teaser/Tiles Grid
We have four teaser boxes side by side. The problem with this floating display was that the individual child elements were not aligned with the highest element in the line.
In addition, there are usually no constant distances between the child elements.
With Flexbox, these discrepancies in the display can be resolved. First, the child elements always have the height of the highest element in a row by default.
On the other hand, equal distances can be achieved by the Parent/Container property “justify-content:space-between”. So with Flexbox you only have to give the child elements one flex-basis: 24%; and the distance between all elements has the same size. (For four columns, the base must be less than 25% to allow space between the elements.)
Example 3: Center now also vertical
Displaying an element vertically centered had its pitfalls. For this you always needed position:absolute or display:table-cell and vertical-alignment:middle. Flexbox simplifies the whole thing many times over. So you give the child element the property margin: auto auto;. Without parent/container display:flex; the child element property margin: auto auto; was always ignored by the browser.
Conclusion: New CSS techniques solve existing problems quite simply and make designing websites easier again.
Have fun using Flexbox!