The main axis is flexbox’s travel direction: the line along which a container lays out its flex items. Think of it as choosing whether your items form a row across the page or a stack down the page. Every flex container also has a cross axis, which runs perpendicular to the main axis. section 12.2
A vertical main axis runs from top to bottom. Set `flex-direction: column` on a flex container to make its children stack vertically; use `column-reverse` to stack them from bottom to top. The main axis is not permanently vertical—`row` and `row-reverse` make it horizontal instead. section 12.2
To make a vertical flex layout, take these small steps:
- Choose a parent element to be the flex container with `display: flex`; its child elements become flex items automatically. section 12.2
- Set `flex-direction: column` so the main axis points downward. section 12.2
- Use `justify-content` when you want to arrange items along that vertical main axis. section 12.2
- Use `align-items` when you want to position items across the horizontal cross axis. section 12.2
Stacking a page’s major regions
A page body can become a single-column flex container: its header, navigation, content, and footer then stack on the vertical main axis. Starting content at the top uses `justify-content: flex-start`; a maximum width and minimum height can shape the overall page area. section 12.11 section 15.11
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: 50em;
min-height: 100vh;
}
This rule makes `body` a flex container with a vertical main axis. `justify-content: flex-start` places its items at the top of that axis. section 12.11
A handy check: before choosing alignment properties, ask which way the items run. With `column`, “along the main axis” means up and down; “along the cross axis” means side to side. That one choice makes the rest of the flexbox controls easier to read. section 12.2
