flexbox
flex
Shorthand for flex-grow, flex-shrink, and flex-basis on a flex item. Controls how the item grows or shrinks to fill the flex container.
flex: none | auto | <flex-grow> <flex-shrink> <flex-basis>Common values
| Value | Effect |
|---|---|
| 0 1 auto | Default; item can shrink but not grow |
| 1 | Equivalent to 1 1 0; item grows to fill space |
| auto | 1 1 auto; grows and shrinks from its content size |
| none | 0 0 auto; item is fully inflexible |
| 1 1 0 | Equal distribution regardless of content |
Examples
.sidebar { flex: 0 0 250px; }Fixed-width sidebar that will not flex
.main { flex: 1; }Main region grows to fill remaining space
.card { flex: 1 1 240px; }Cards flex from a 240px basis into equal columns
Gotcha
flex: 1 resets flex-basis to 0, which changes how content-based widths compute compared to flex: auto.
Related properties
flex-direction
Sets the main axis of a flex container, deciding whether items lay out horizontally or vertically. It also determines which direction items are reversed if needed.
justify-content
Aligns flex or grid items along the main axis, distributing extra space between them. It has no effect if the items already fill the container.
align-items
Aligns flex or grid items along the cross axis of their container. It is the counterpart to justify-content and controls vertical alignment in a default row layout.
gap
Shorthand for row-gap and column-gap, setting spacing between flex, grid, or multi-column items. Replaces margin hacks for evenly spacing children.