Nearby lessons
3 of 15🧩 CSS Flex Items
📌 What are CSS Flex Items?
Master flex item properties with this interactive guide! 🎯 Each example demonstrates how flex items behave within their container.
✨ Features
- Interactive code examples for each property
- Visual demonstrations with emoji markers
- Complete coverage of all flex item properties
- End-of-guide quiz to test your knowledge
1️⃣ order - Visual Reordering
🔄 The order property controls the order in which items appear in the flex container.
🔑 Key points:
- Default value is 0 for all items
- Items are laid out in ascending order
- Doesn't affect screen reader/tab order
| Attribute | Value | Description |
|---|---|---|
order | 0 (default) | Items appear in source order |
order | <integer> | Lower values appear first |
🔀 Using order to rearrange items visually
order changes the visual order of flex items without affecting the source HTML order.
Code Example
2️⃣ flex-grow - Growth Factor
📈 The flex-grow property defines how much a flex item will grow relative to others.
💡 Tip: This determines how extra space is distributed!
| Attribute | Value | Description |
|---|---|---|
flex-grow | 0 (default) | Item won't grow (maintains initial size) |
flex-grow | <number> | Proportional growth factor |
🌱 Items grow proportionally based on flex-grow values
flex-grow defines how much a flex item will grow relative to the rest of the items when space is available.
Code Example
3️⃣ flex-shrink - Shrink Factor
📉 The flex-shrink property defines how much a flex item will shrink relative to others.
⚠️ Note: Only applies when items overflow the container!
| Attribute | Value | Description |
|---|---|---|
flex-shrink | 1 (default) | Item will shrink if needed |
flex-shrink | 0 | Item won't shrink below its flex-basis |
flex-shrink | <number> | Proportional shrink factor |
🍂 Items shrink differently based on flex-shrink values
flex-shrink defines how much a flex item will shrink relative to the rest when space is limited. Resize the window to see the effect.
Code Example
4️⃣ flex-basis - Initial Size
📏 The flex-basis property sets the initial main size of a flex item.
🎯 Key concept: This is the size before any growing or shrinking occurs!
| Attribute | Value | Description |
|---|---|---|
flex-basis | auto (default) | Looks at width/height property |
flex-basis | <length> | Explicit size (px, %, em, etc.) |
flex-basis | content | Sizes based on item's content |
📐 Items start with different initial sizes via flex-basis
flex-basis sets the initial main size of a flex item before free space is distributed.
Code Example
5️⃣ flex - The Shorthand
🎨 The flex shorthand combines flex-grow, flex-shrink, and flex-basis.
📝 Common patterns:
flex: 1=1 1 0%flex: auto=1 1 autoflex: none=0 0 auto
| Attribute | Value | Description |
|---|---|---|
flex | none | 0 0 auto (no growth/shrink) |
flex | auto | 1 1 auto (full flexibility) |
flex | initial | 0 1 auto (shrink but no grow) |
flex | <grow> <shrink> <basis> | Complete specification |
🎛️ Different flex shorthand combinations
The flex shorthand property combines flex-grow, flex-shrink, and flex-basis in a single declaration.
Code Example
6️⃣ align-self - Individual Alignment
🎯 The align-self property overrides the container's align-items for individual items.
✨ Use case: When you need one item to behave differently from others!
| Attribute | Value | Description |
|---|---|---|
align-self | auto (default) | Inherits from align-items |
align-self | flex-start | Aligns to cross start |
align-self | flex-end | Aligns to cross end |
align-self | center | Centers along cross axis |
align-self | baseline | Aligns by text baseline |
align-self | stretch | Stretches to fill container |
🎨 Individual items overriding container alignment with align-self
align-self allows individual flex items to override the container's align-items setting, enabling different vertical alignments for each item.