flex-basis sets the initial main-size contribution of a flex item before Flexbox distributes available space. Think of it as the browser’s starting size, not always the item’s final size. section 6.7.3 section 6.9
Use flex-basis when a flex layout needs a predictable starting proportion or width:
- Set three profile-card likes to flex-basis: 33%; with flex-shrink: 1, they can shrink evenly to account for the gaps between them. section 6.7.3
- Give a checkout summary card flex-basis: 250px; the cart can then grow into remaining space with flex-grow: 1. section 8.5
- Remember that flex-basis works with flex-grow and flex-shrink: the browser may adjust the starting size when available space differs. section 8.5 section 8.6
Profile likes
For three equal items inside a flex container, start each item at one-third of the available width and allow adjustment when a 12px gap makes the total too wide. section 6.7.3
Inspect the compact rule that combines a percentage flex-basis with shrinking for evenly sized likes. section 6.7.3
Listing 8.29 Placing the two cards side by side on wide screens
@media (min-width: 955px) {
.section-container {
display: flex;
gap: 20px;
}
section.my-cart { flex-grow: 1; }
section.summary { flex-basis: 250px }
}
Inspect a responsive media-query rule that gives the summary a 250px starting width while the cart grows. section 8.5
