Note: Different syntax is required for different versions of different browsers. For information on browser support for flexbox, see Can I use Flexible Box Layout Module?.
Getting started
- Put
display: flex;
in the styling for adiv
that’s going to hold the items (the container) - Put in some child
divs
withflex: 1;
in the styling.*
The default direction for flexbox is row, so they will appear next to each other instead of stacked on top of each other.
*flex: 1;
is shorthand for applying flex-grow: 1; flex-shrink: 1; flex-basis: auto;
Source: A Complete Guide to Flexbox
Make stacked child divs
fill the available height
Say you have a container with a specified height, and you want the child divs
to fill the container vertically.
- Follow steps for ‘Getting started’.
- Add
flex-direction: column;
on the container to stack the children on top of each other
Source: Boxes That Fill Height (Or More) (and Don’t Squish)
Centring div
within parent
This is joyously easy to do. On the container element, set
display: flex;
justify-content: center;
(this will align the childdiv
horizontally)align-items: center;
(for the vertical alignment)
You don’t need to set anything on the child div
unless you want its contents to be likewise aligned (in which case you apply these same stylings to the child div
too).
Source: Designing CSS Layouts With Flexbox Is As Easy As Pie