flex
The flex shorthand sets how a flex item grows, shrinks, and its initial size along the main axis.
Syntax
flex: <grow> <shrink> <basis>; /* e.g. flex: 1 1 0% */
Examples
.row { display: flex; }
.sidebar { flex: 0 0 240px; }
.content { flex: 1; }
Output
Renders a fixed 240px sidebar next to a content area that expands to fill the remaining space.
Notes
flex:1 expands to flex:1 1 0%. flex:auto (1 1 auto) sizes from content then grows; flex:none (0 0 auto) is rigid. Set the parent to display:flex first.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 29 |
| firefox | 28 |
| safari | 9.0 |
| edge | 12 |