Flex Item Properties Deep Dive
Flex items (children) have their own properties that control how they grow, shrink, and size themselves within the container. Master flex-grow, flex-shrink, flex-basis, and the flex shorthand.
Item Properties
- flex-grow - How much an item GROWS relative to siblings. flex-grow: 1 means fill available space equally
- flex-shrink - How much an item SHRINKS when container is too small. Default is 1 (shrink equally)
- flex-basis - Initial size BEFORE growing/shrinking. Similar to width but respects the flex algorithm
- flex: 1 - Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Fill space equally
- flex: 0 0 250px - Don't grow, don't shrink, always 250px. Use for fixed-width sidebars
- align-self - Override align-items for a single item: align-self: center on one child
- order - Change visual order without changing HTML order. Default is 0. Negative values move items earlier
Item Properties Code
/* Sidebar + content layout */
.page {
display: flex;
gap: 24px;
}
.sidebar {
flex: 0 0 250px; /* Fixed 250px, don't grow or shrink */
}
.main-content {
flex: 1; /* Fill remaining space */
}
/* Equal-width columns */
.columns {
display: flex;
gap: 20px;
}
.columns > * {
flex: 1; /* All columns share space equally */
}
/* One item takes double space */
.col-double { flex: 2; } /* Twice the width of flex: 1 */
/* Override alignment for one item */
.container {
display: flex;
align-items: flex-start;
}
.push-bottom {
align-self: flex-end; /* This item goes to bottom */
}
/* Reorder visually */
.move-first { order: -1; } /* Moves to beginning */
.move-last { order: 999; } /* Moves to end */Tip
The sidebar + main content pattern (flex: 0 0 250px on sidebar, flex: 1 on content) is the most common real-world Flexbox pattern. Once you understand flex: 0 0 250px (don't grow, don't shrink, always 250px) vs flex: 1 (fill everything else), layouts become intuitive.
Flexbox is ideal for one-dimensional layouts (row or column)
Common Mistake
Setting width instead of flex-basis for flex item sizing. In a flex container, flex-basis is the correct way to size items because it participates in the flex algorithm. Width can interfere with how items grow and shrink, leading to unexpected results.
Practice Task
Build a sidebar layout: (1) parent with display: flex + gap: 24px, (2) sidebar with flex: 0 0 250px and a background color, (3) main content with flex: 1. Then add a second item with flex: 2 and verify it takes double the space of a flex: 1 sibling.
Quick Quiz
Key Takeaways
- Flex items (children) have their own properties that control how they grow, shrink, and size themselves within the container.
- flex-grow - How much an item GROWS relative to siblings. flex-grow: 1 means fill available space equally
- flex-shrink - How much an item SHRINKS when container is too small. Default is 1 (shrink equally)
- flex-basis - Initial size BEFORE growing/shrinking. Similar to width but respects the flex algorithm