CSS Flexbox
Flex Item Sizing
Control how individual flex items grow, shrink, reorder, align, and resolve their size against the available space. It explains flex-basis, positive and negative free space, growth, shrinkage, automatic minimum sizes, per-item alignment, and visual reordering.
A flex item’s final main-axis size is negotiated from its flex basis, growth factor, shrink factor, minimum size, and the free space in its container.
Flexbox is not simply “items in a row.” It is a sizing algorithm that begins with each item’s base size and then distributes extra space or removes a shortfall. Long content and automatic minimum sizes participate in that calculation, which is why changing flex-shrink alone may not solve overflow. This topic also connects with Flex Container and Align Items.
The flex shorthand has three parts
Example
css
.search-field { flex: 1 1 18rem; }
.search-button { flex: 0 0 auto; }
.truncate {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}flex: grow shrink basis combines flex-grow, flex-shrink, and flex-basis. Layout starts with the basis, then distributes positive or negative free space. flex: 1 is commonly equivalent to a zero basis, which is not the same as flex: 1 1 auto.
Per-item alignment
Example
css
.card__action {
align-self: end;
margin-inline-start: auto;
}Visual order is not document order
order and reversed directions change visual presentation but usually do not change DOM, reading, or sequential keyboard order. Keep meaningful content in the correct source order.
- Use
gapfor consistent space between items. - Use auto margins when one item should consume remaining space.
- Check long words and minimum sizes before blaming flex-shrink.
- Prefer wrapping to shrinking controls below usable sizes.
Flex Item Properties
| Property | Purpose | Example |
|---|---|---|
| flex-grow | Distributes positive free space. | flex-grow: 1 |
| flex-shrink | Controls shrinking when space is insufficient. | flex-shrink: 0 |
| flex-basis | Sets the initial main size. | flex-basis: 18rem |
| align-self | Overrides cross-axis alignment for one item. | align-self: start |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flex Item Sizing example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.search-field { flex: 1 1 18rem; }
.search-button { flex: 0 0 auto; }
.truncate {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.card__action {
align-self: end;
margin-inline-start: auto;
}
</style>
</head>
<body>
<main class="toolbar"><input class="search-field" value="A flexible search field with a long value"><button class="search-button">Search</button><a class="card__action" href="#">Help</a></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| flex-grow | 29 | 12 | 20 | 9 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Flex sizing becomes predictable once basis, growth, shrinkage, and minimum size are considered together.
Use the shorthand only when its expansion is understood, and set min-inline-size: 0 when a flexible item should be allowed below its content-based minimum. Keep meaningful source order intact even when auto margins or alignment change the visual arrangement.