Flex Items
Item-level properties decide how each flex child grows, shrinks, sits, and reorders relative to its siblings.
Item properties
| Property | Default | Purpose |
|---|---|---|
flex-grow | 0 | Share of leftover space when growing. |
flex-shrink | 1 | How aggressively it shrinks when out of room. |
flex-basis | auto | Starting size before grow/shrink kick in. |
flex | 0 1 auto | Shorthand for the three above. |
order | 0 | Visual position (lower comes first; can be negative). |
align-self | auto | Overrides the container's align-items for this one item. |
The three common flex shortcuts
CSS
.item-fixed { flex: 0 0 200px; } /* never grow, never shrink, start at 200px */
.item-fill { flex: 1; } /* same as 1 1 0 — eats leftover room */
.item-natural { flex: 0 1 auto; } /* default — sized by content, can shrink */
Reordering without DOM changes
CSS
.sidebar { order: -1; } /* visually first, even though it's last in the HTML */
Note:
order only changes visual order. Tab order and screen-reader reading order still follow the DOM — keep the HTML order semantic for accessibility.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>Flex Items</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Lock this item to 200px, never growing or shrinking.
.sidebar { flex: 0 0
; }
A fixed pixel basis.
Discussion
Loading…