CSS · Chapter 23 of 44
CSS Flexbox Items
Individual flex items can be controlled with flex-grow, flex-shrink, flex-basis (often combined as flex), align-self, and order.
flex-grow lets an item expand to fill available space, while order changes the visual sequence without altering the HTML.
Syntax
flex: grow shrink basis;Growing and shrinking
flex-grow defines how much extra space an item takes relative to siblings. flex-shrink controls how much it shrinks when space is tight. flex-basis sets its initial size.
Order and align-self
order changes visual position without changing HTML order. align-self overrides align-items for a single item.
Example 1 (css)
.sidebar {
flex: 0 0 200px;
}
.main {
flex: 1;
}Output
A fixed 200px sidebar and a main area that fills the remaining spaceflex: 1 lets the main area grow to fill all leftover space while the sidebar stays fixed.
Key points
- flex-grow controls how items expand to fill space.
- flex-shrink controls how items shrink under pressure.
- flex-basis sets an item's starting size.
- order and align-self control individual item behavior.
💡 Note: flex: 1; is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0;.