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 a div that’s going to hold the items (the container)
• Put in some child divs with 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’.
• 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 child div 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