CSS FlexBox intro

Yasuhiro Nakano
LEAD Frontend Developer

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.

Useful features

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.

cssflexboxintro-01

Changing order of blocks

FlexBox can change order of blocks.

cssflexboxintro-02

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”

Summary:

With FlexBox, we can change the normal <div> layout into a grid-like layout with minimal code additions.

Before (normal divs)
cssflexboxintro-06
After (FlexBox)
cssflexboxintro-10

For more complete explanation of FlexBox, please refer to: A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Browser support as of 2017 May

All the modern browsers now support FlexBox, except IE11. For IE11 bugs, refer to the “flexbugs” article: https://github.com/philipwalton/flexbugs

cssflexboxintro-11Reference: https://caniuse.com/#feat=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.

Reference: https://css-tricks.com/snippets/css/complete-guide-grid/

- Yasuhiro NakanoLEAD Frontend Developer | 

Filed under: <DesignDevelopment>

Hire Our Expert CSS Coders

Get CSS Help