CSS: CSS Flexbox Items
Last updated: 2026-10-13
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
▶ Try it Yourself3. flex: 1 Shorthand
flex: 1 is the most common shorthand:
▶ Example
▶ Try it Yourselfflex: 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
▶ Try it YourselfNote: 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
▶ Try it Yourself❓ 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.
