flex
A shorthand property that sets 'flex-grow', 'flex-shrink', and 'flex-basis' together. Lets you configure a flex item's grow/shrink behavior in one declaration.
Sample Code
/* Neither grow nor shrink (initial value) */
.item { flex: 0 1 auto;}
/* Distribute free space equally */
.item-grow { flex: 1;}
/* Fixed size (no grow or shrink) */
.item-fixed { flex: none;}
/* Base 200px, grow if space available, shrink if needed */
.item-flexible { flex: 1 1 200px;}
Available Values
| Value | Description |
|---|---|
| none | Same as '0 0 auto'. The item neither grows nor shrinks. |
| auto | Same as '1 1 auto'. The item uses content-based sizing, grows if there is free space, and shrinks if needed. |
| <number> | A single number is treated as the 'flex-grow' value. 'flex: 1;' is equivalent to 'flex: 1 1 0;'. |
| <grow> <shrink> <basis> | Three space-separated values corresponding to 'flex-grow', 'flex-shrink', and 'flex-basis' respectively. |
Specification
| Item | Details |
|---|---|
| Initial value | 0 1 auto |
| Applies to | Flex items |
| Inherited | No |
| Animation | Partially (flex-grow and flex-shrink are interpolatable; flex-basis is conditional) |
Browser Compatibility
Chrome29+ ○
28 △27 △26 △25 △24 △23 △22 △21 △20 or earlier ×
Firefox22+ ○
21 or earlier ×
Safari9+ ○8 △
7 △6 or earlier ×
Edge12+ ○
IE11 ○10 △9 ×
8 ×7 ×
6 ×
Opera12.1+ ○
11 or earlier ×
iOS Safari9+ ○8 △7 △6 or earlier ×
Android Browser4.4+ ○3 or earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○Overview
'flex' is a shorthand property for specifying a flex item's grow/shrink behavior in one declaration. The CSS specification recommends using the 'flex' shorthand rather than the individual 'flex-grow', 'flex-shrink', and 'flex-basis' properties, because omitted values get appropriate defaults that help prevent unexpected behavior.
Comparison of Common Values
Common Values
| Value | Expanded | Meaning |
|---|---|---|
| flex: 1; | flex: 1 1 0; | Distribute free space equally. Most commonly used. |
| flex: auto; | flex: 1 1 auto; | Grow and shrink based on content size. |
| flex: none; | flex: 0 0 auto; | Fixed size, does not grow or shrink. |
| flex: 0; | flex: 0 1 0; | Does not grow. Does not distribute space. |
| flex: 1 1 200px; | — | Base 200px with grow and shrink enabled. |
Note on 'flex: 1;'
'flex: 1;' expands to 'flex: 1 1 0;', which means 'flex-basis' is set to '0'. This behaves differently from specifying only 'flex-grow: 1' (which leaves 'flex-basis: auto').
/* flex: 1; → flex-basis: 0 → equal width regardless of content */
.item-a { flex: 1;}
/* flex-grow: 1; → flex-basis: auto → content-based width + distributed space */
.item-b { flex-grow: 1;}
Use 'flex: 1;' for equal widths, or 'flex: auto;' when you want to maintain content size while distributing remaining space.
Pattern 1: Holy Grail Layout
.layout { display: flex;}
.sidebar-left { flex: 0 0 200px;} /* left sidebar: fixed 200px */
.main-content { flex: 1;} /* main: all remaining space */
.sidebar-right { flex: 0 0 150px;} /* right sidebar: fixed 150px */
Pattern 2: Equal Card Layout
.card-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 300px; /* minimum 300px, distribute remaining space equally */
}
IE10/IE11 Bugs
IE10/IE11 have bugs in interpreting the 'flex' shorthand. In particular, 'flex: 1;' may not work correctly. If IE support is required, explicitly specify a unit for 'flex-basis' such as 'flex: 1 1 0%;' to be safe.
Related Properties
| Property | Description |
|---|---|
| flex-grow | Specifies the grow factor. Corresponds to the first value of 'flex'. |
| flex-shrink | Specifies the shrink factor. Corresponds to the second value of 'flex'. |
| flex-basis | Specifies the base size. Corresponds to the third value of 'flex'. |
If you find any errors or copyright issues, please contact us.
シェアする