The Flex Container

What this is. Flexbox arranges children along one axis and distributes the leftover space between them. You turn it on by setting display: flex on the parent, and from that moment its direct children become flex items.

What problem it solves. Before Flexbox, centering a box vertically was genuinely difficult, and putting a logo on the left with links on the right meant floats and clearfixes. Flexbox replaced a decade of workarounds with two or three declarations.

✦ The container controls the children

This is the part that trips people up. You do not tell a link to sit on the right. You tell its parent how to distribute space, and the link ends up there. Almost every Flexbox property goes on the container, not on the items.