Introduction

Before Flexbox, centring a box or spacing a row of items evenly meant floats, fiddly margins, and guessing. Flexbox was built for exactly this job: arranging items in one direction — a row or a column — and deciding how they share the available space.

If you can answer two questions — "which direction?" and "how should the space be shared?" — you can build most everyday layouts with Flexbox.

The container and the items

Flexbox starts with a parent element, the flex container. Setting display: flex on it turns its direct children into flex items, laid out in a row by default.

.nav { display : flex ; }

Enter fullscreen mode

Exit fullscreen mode

That one line already lines the children up side by side.…