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?.
display: flex;in the styling for a
divthat’s going to hold the items (the container)
- Put in some child
flex: 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’.
flex-direction: column;on the container to stack the children on top of each other
div within parent
This is joyously easy to do. On the container element, set
justify-content: center;(this will align the child
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
Source: Designing CSS Layouts With Flexbox Is As Easy As Pie