When several flex items should align together except for one deliberate exception, use align-self on that individual item. It controls the item’s position along the container’s cross axis, while align-items supplies the shared default. The value auto defers to align-items; any other supported value overrides it. section 4.4.2
Choose align-self when one item needs a different cross-axis treatment:
- Use auto to inherit the flex container’s align-items behavior. section 4.4.2
- Use flex-start, flex-end, start, end, self-start, self-end, center, stretch, or baseline to override that shared setting. section 4.4.2
- Remember that place-self combines align-self with justify-self; justify-self is ignored on flex containers. section 4.4.2
Raise the cents in a price tile
A stylized price uses flexbox to center the currency, dollars, and cents. The larger dollar value establishes the visual height, while the cents move to the top with an item-specific override: .cost { display: flex; justify-content: center; align-items: center; line-height: 0.7; } .cost-currency { font-size: 2rem; } .cost-dollars { font-size: 4rem; } .cost-cents { font-size: 1.5rem; align-self: flex-start; } The container centers all three items by default; align-self changes only the cents. The line-height value is tuned so the text tops align visually. section 4.4.3
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 the shared align-items rule and the item-level align-self override. section 4.4.3
