The CSS align-items property sets the default alignment of flex or grid items along the cross axis. In a flex row, that axis is vertical; in a flex column, it is horizontal. Its initial value, stretch, makes items fill the container’s cross-axis size, producing equal-height columns in a row layout. section 4.4.1 section 5.6
Choose a value according to the visible alignment you need:
- Use flex-start or flex-end to place items at the cross-axis start or end; use start or end for logical alignment based on the container’s writing mode. section 4.4.1
- Use center to center items, or baseline to line up the first text baselines across items with different font sizes. Add first or last to select the text line. section 4.4.1
- Remember that align-items sets the default for every flex item; align-self can override that default for one item. section 4.4.3 section 4.5
Aligning a stylized price
A price can use flexbox to center its parts while aligning them vertically: .cost { display: flex; justify-content: center; align-items: center; line-height: 0.7; }. The larger dollar amount, currency symbol, and cents then share a centered cross-axis alignment. The cents can opt out with .cost-cents { align-self: flex-start; }, placing it at the cross-axis start. section 4.4.3
Aligning navigation controls
For a navigation row whose links no longer fill the container’s height, .nav-container__inner { display: flex; justify-content: space-between; align-items: end; } places the flex items at the bottom, removing the unwanted space beneath them. section 12.6.2
Listing 4.11 Setting styles for the cost tile
.centered {
text-align: center;
}
.cost {
display: flex;
justify-content: center; #1
align-items: center; #1
line-height: 0.7;
}
.cost-currency {
font-size: 2rem; #2
}
.cost-dollars {
font-size: 4rem; #2
}
.cost-cents {
font-size: 1.5rem; #2
align-self: flex-start; #3
}
.cta-button {
display: block;
background-color: #cc6b5a;
color: white;
padding: 0.5em 1em;
text-decoration: none;
}
Inspect the complete cost-tile stylesheet, including centered flex alignment, varied font sizes, line-height adjustment, and the align-self override. section 4.4.3
