How do you enable Flexbox layout on a container, and how do you control its children?

Set display: flex on the parent to turn it into a flex container; its direct children then become flex items you size with the flex property.

Flexbox always involves two roles: a container (the parent) and its items (the direct children). Turning on Flexbox is a two-step process:

/* Step 1: make the parent a flex container */
#parent { display: flex; }

/* Step 2: tell each child how to size itself */
#parent div { flex: 1 0 auto; }

Step 1 alone already lays the children out in a row. Step 2 is optional fine-tuning: the flex property on each child decides how it shares space relative to its siblings — a child with a bigger flex value claims a bigger share of the container. Without it, items keep their natural content size.