Columns
Next comes the hero. Its headline, text and link are one below another, but the headline and the text touch. Let's make the hero a flex container in a column: then we can space its items with gap, and later in this lesson, center them.
The direction of the main axis (the property flex-direction) is set by these classes:
| Class | CSS | Direction |
|---|---|---|
flex-row | flex-direction: row; | a row from left to right (the default) |
flex-col | flex-direction: column; | a column from top to bottom |
flex-row-reverse | flex-direction: row-reverse; | a row from right to left |
flex-col-reverse | flex-direction: column-reverse; | a column from bottom to top |
Careful: flex-col only says which way the items go. The container also needs the class flex; without it, it isn't a flex container at all.
As you know from the CSS course, the axes turn with the direction. In a column, the main axis goes from top to bottom and the cross axis from left to right. So in a column, justify-* moves the items up and down, and items-* moves them to the left and right.
Instructions
Add the classes flex flex-col to the hero (the section with the orange background). The items are one below another, as before, but look at the link: it's now as wide as the whole hero. In a column, the cross axis goes from left to right, and flex items stretch along it (items-stretch is the default). As a flex item, the link is laid out as a block, so its inline-block no longer matters.
Add the class gap-4. The headline, the text and the link move 16 px apart.
Add the class items-start. The items are no longer stretched: each one is only as wide as its content needs, at the start of the cross axis, which is on the left.
Start programming for free
4/11