Use justify-content to distribute flex items along the main axis or grid tracks horizontally when the content does not fill its container. In flexbox, flex-start is the default; flex-end and center move items toward the end or middle. section 4.4.1 section 5.6
Choose the value according to the space you want around and between the items or tracks:
- Use flex-start or start to place content at the beginning; use flex-end or end to place it at the end. Logical start and end respond to writing mode, while left and right remain absolute. section 4.4.1
- Use center to place content in the middle. section 4.4.1
- Use space-between for no outer space, space-around for half-sized outer spaces, or space-evenly for equal spaces throughout. section 4.4.1 section 5.6
- Remember that flex spacing is calculated after margins and flex-grow values. section 4.4.1
Centering a price and call to action
Make the price parts a flex container, then center them horizontally with justify-content. Pair it with align-items for vertical alignment and align-self for an individual item. 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 cost-tile stylesheet, where justify-content: center centers the currency, dollar, and cents items inside the flex container. section 4.4.3
