CSS: CSS Flexbox Items
Flexbox item properties give you fine control over individual children within a flex container.
1. Flex Item Properties
(1) Quick Reference
| Property | Values | Purpose |
|---|---|---|
flex-grow |
0, 1, 2, ... |
How much item grows relative to siblings |
flex-shrink |
0, 1, 2, ... |
How much item shrinks relative to siblings |
flex-basis |
auto, 100px, 50% |
Initial size before grow/shrink |
flex |
1, 0 0 200px, 1 1 auto |
Shorthand for grow, shrink, basis |
order |
0, 1, -1 |
Visual order (doesn't affect DOM) |
align-self |
auto, flex-start, flex-end, center |
Override parent's align-items |
2. flex-grow
Controls how much a flex item grows relative to other items:
▶ Example
HTML
<style>
.container {
display: flex;
gap: 10px;
background: #f5f5f5;
padding: 10px;
}
.item-1 { flex-grow: 1; background: #3498db; padding: 10px; color: white; }
.item-2 { flex-grow: 2; background: #e74c3c; padding: 10px; color: white; }
.item-3 { flex-grow: 1; background: #2ecc71; padding: 10px; color: white; }
</style>
<div class="container">
<div class="item-1">grow: 1</div>
<div class="item-2">grow: 2 (twice as wide)</div>
<div class="item-3">grow: 1</div>
</div>
3. flex: 1 Shorthand
flex: 1 is the most common shorthand:
▶ Example
HTML
<style>
.container {
display: flex;
gap: 10px;
background: #f5f5f5;
padding: 10px;
}
.item {
flex: 1;
background: #9b59b6;
padding: 10px;
color: white;
text-align: center;
}
</style>
<div class="container">
<div class="item">Equal</div>
<div class="item">Equal</div>
<div class="item">Equal</div>
</div>
flex: 1 means flex-grow: 1; flex-shrink: 1; flex-basis: 0% — "grow to fill available space equally."
4. order
Changes visual order without affecting DOM order:
▶ Example
HTML
<style>
.container {
display: flex;
gap: 10px;
background: #f5f5f5;
padding: 10px;
}
.item {
background: #f39c12;
padding: 10px;
color: white;
}
.item:nth-child(2) { order: -1; } /* Moves to front */
</style>
<div class="container">
<div class="item">1st in DOM</div>
<div class="item">2nd in DOM (visually first)</div>
<div class="item">3rd in DOM</div>
</div>
Note: order only changes visual order, not DOM order. Screen readers still follow DOM order.
5. align-self
Overrides parent's align-items for individual items:
▶ Example
HTML
<style>
.container {
display: flex;
align-items: center;
height: 200px;
background: #f5f5f5;
gap: 10px;
padding: 10px;
}
.item {
background: #e74c3c;
padding: 10px;
color: white;
}
.item:nth-child(2) { align-self: flex-end; }
.item:nth-child(3) { align-self: flex-start; }
</style>
<div class="container">
<div class="item">Center (default)</div>
<div class="item">Bottom (align-self)</div>
<div class="item">Top (align-self)</div>
</div>
❓ FAQ
Q What does flex: 1 mean?
A
flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0% — meaning "grow to fill remaining space." When multiple items all have flex: 1, they equally share the container width.Q Does order affect DOM structure?
A No.
order only changes visual arrangement, DOM order stays the same. Screen readers still follow DOM order, so don't use order for visual-only sorting — it affects accessibility.Q Which has higher priority: align-self or align-items?
A
align-self has higher priority. It acts on individual items, overriding the parent's align-items. For example, parent sets align-items: center for center alignment, but a child can set align-self: flex-start to align to the top individually.📖 Summary
- Flexbox item properties let you finely control each child's order and size
flex: 1is the most common equal-split shorthand;orderadjusts visual order without changing HTML;align-selflets individual elements "stand out"- Remember: container properties control overall, item properties control individual
📝 Exercises
- Create a flex container with 5 items. Use
orderto show the 3rd item first and the 1st item last. - Use
flex-growto implement "three equal columns," then make the center column twice the width of the sides. - Create a "fixed sidebar + adaptive content" layout: sidebar uses
flex: 0 0 250px, content usesflex: 1. - In a container, align the first two items to the top and the third to the bottom using
align-self.
