Control how things line up

Left to themselves, HTML elements stack from top to bottom. But the screens you want to build are mostly laid out across: a logo and a menu in the header, a row of product cards, a confirmation screen with two buttons side by side.

Old CSS was not good at this "put things in a row". People borrowed the setting for text flowing around a picture, or switched how an element was displayed — combining features that were never meant for the job. Naturally, it often did not come out the way they wanted.

Flexbox is a mechanism built for lining things up, and nothing else. It is the main tool for layout today. What you learn in this chapter comes down to a single idea: you give the instruction to the "parent" that does the lining up, and the "children" inside line up accordingly.

Write "put these in a row" on the parent and its contents go into one line. Write "space them evenly" and they are handed out that way. Rather than going round each child telling it where to sit, you tell the one in charge what the policy is. That is the heart of how Flexbox thinks.

There are four main things you can do.

• Set the direction — across in a row, or stacked in a column
• Line up along the main direction — to the left, centred, pushed to both ends, spread evenly
• Line up across the other direction — things of different heights sitting at the top, or centred
• Wrap — send what does not fit onto the next line, or squash it in

The really handy one is centring. "Put it dead centre, up and down and left and right" used to be quietly awkward in CSS. With Flexbox it takes two lines.

Wrapping is what pays off when you come to phones. Three cards in a row drop to two, then to one, as the screen narrows. You do not have to write a media query — if they will not fit, they wrap by themselves. Combine that with the switching from the last chapter and you cover a wide range of widths with very little code.

You also deal with how leftover width is shared out. Of three things in a row, you want only the middle one to grow. That can be set on the child. It is the shape you reach for when you build a header as "logo on the left, menu on the right, space in between".

Learn how to leave gaps between elements as well. The spacing between things you have lined up can be set in one go with a setting made for it. Going round adding outer space one by one leaves the ones at the ends with space they did not need. Telling the one in charge "the gap is this much" is far more straightforward.

The easy thing to trip on is telling the wrong one. The lining-up settings go not on "the elements you want lined up" but on "the parent that surrounds them". To put cards in a row you write it on the box holding the cards, not on the cards. When it does not work, first check where you wrote it.

The other one is that the setting for lining up vertically and the setting for lining up horizontally swap over with the direction. When things are in a row, one handles left and right and the other handles up and down; stack them in a column and it is the other way round. This is quicker to feel by flipping the direction and watching than to memorise.

Once Flexbox is yours, the time you lose stuck on layout drops away. Put it together with the spacing and finishing from the chapters before and you should be able to build most of the screen shapes you have seen around.

There is one other mechanism for arranging things besides Flexbox, which places them on a grid. That one suits you better when you want rows and columns lined up precisely, but get Flexbox into your hands first. It is enough for the great majority of the layouts you write day to day.

This is the last chapter of the HTML & CSS course. You can make things move with JavaScript and make them look right with HTML and CSS, so next it is your turn to build a small app on your own computer. Everything you have picked up here works as it is out in the real thing.