Originally published on CodingCush .

Flexbox is the CSS tool for arranging items in a row or a column, and it solves the layout problems that used to drive web designers quietly mad: spacing items out evenly, centring something perfectly, or making a navigation bar behave. You turn a container into a flex container with one line, display: flex , and its children become flex items that you can line up, spread out, stretch and wrap using a small set of properties. Learn about six properties — flex-direction, justify-content, align-items, flex-wrap, gap and flex — and you can build almost every one-dimensional layout on the modern web.

Before Flexbox, centring a box was a running joke in web development: people used floats, tables and absolute positioning to fake simple rows and columns, and the results were fragile.…