FlexBox is the best tool to create a grid-like layout with CSS. Better than <table> tags, better than inline-block <div>s !
History of table layout methods
Before FlexBox, it was tricky to implement a grid-like layout.
Around 1998, we only had one option to create a grid, <table>.
But styling was limited, and the result was not consistent among browsers.
I remember I had to use the background color of <table> tag to implement 1-pixel width cell borders. Creating a nice looking <table> was a nightmare.
Around 2000, a newer method became popular – <div> with “display: inline-block” technique.
This method was better than <table> tags for styling.
However, not everything about it was perfect. Setting equal cell heights and center aligning cell contents have always been tricky. We had to use far too many CSS lines to make the table look nice.
Around 2010, yet another method became popular – <div> with “display: table-cell” technique.
This was created to solve the “setting equal cell heights” problem with “display: inline-block”.
While this worked better than the older methods, it still had issues such as “min-height not working”.
Then finally, FlexBox came up around 2013.
The 2 most useful features of FlexBox are equal height cells and block re-ordering.
Equal height cells
FlexBox can set equal heights on blocks.
Changing order of blocks
FlexBox can change order of blocks.
Overriding older layout methods
FlexBox is also useful when you have to change an existing HTML structure with older layout methods.
This grid-like layout is created with “display: inline-block” technique.
By adding FlexBox rules, the layout can be changed like this.
How to use FlexBox
This is a HTML structure with normal <div>s.
To apply FlexBox to this structure, add “display: flex” to the parent <div>. (This will reset the “display” properties on children to be “display: block”.)
To distribute 3 boxes evenly on one row, add “justify-content: space-between” to the parent <div>.
To stretch the 3 boxes to fill the row, add “width: 100%” to the child <div>s.
To horizontally and vertically align box contents, we use nested “display: flex” technique.
Add these 3 rules to the child <div>s:
- “display: flex”
- “justify-content: center”
- “align-items: center”
With FlexBox, we can change the normal <div> layout into a grid-like layout with minimal code additions.
For more complete explanation of FlexBox, please refer to: A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grid is coming soon
There is another CSS rule set called “Grid” which is being developed right now.
- FlexBox is a 1-dimensional system – row or column.
- Grid is a 2-dimensional system – true grid layout.
It will become a better tool than FlexBox to implement a table like layout. However, the browser support is still limited as of May 2017.
- A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Can I Use: https://caniuse.com/
- A Complete Guide to Grid: https://css-tricks.com/snippets/css/complete-guide-grid/