Flex Layout Property
Last updated: 2026-09-13
flex Flex Layout Property
The flex property is the core shorthand of the CSS Flexible Box Layout module. It sets how a flex item grows, shrinks, and how much space it occupies relative to the remaining space in the container. It is a shorthand for flex-grow, flex-shrink and flex-basis, which control the item’s growth factor, shrink factor and initial main size. With flex, common layouts such as equal-width columns, fluid widths and flowing arrangements are easy to build.
| Category | |
|---|---|
| Initial Value | 0 1 auto |
| Inherited | No |
| Applies To | flex-items |
| Animation Type | length |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
flex: none | auto | initial | <flex-grow> <flex-shrink>? <flex-basis>?;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | auto | initial | Keyword | Predefined flex values |
<flex-grow> <flex-shrink>? <flex-basis>? | Value | Flex grow/shrink/basis values |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Tip： flex: 1; is shorthand for flex: 1 1 0%. The item can grow and shrink and starts from a base size of 0, which is the typical way to make items share the remaining space equally.
Warning： flex: none; is equivalent to flex: 0 0 auto. The item neither grows nor shrinks and is sized purely by its content or an explicit width/height. Use it for fixed-size sidebars or buttons.
❓ FAQ
QWhat is the difference between flex: 1 and flex: auto?
Aflex: 1 is shorthand for flex: 1 1 0%. The base size is 0, so the whole width is redistributed proportionally and multiple flex: 1 items come out strictly equal width. flex: auto is shorthand for flex: 1 1 auto: each item is first sized from its content or width, then the leftover space is shared proportionally, so items with more content take more room. Use flex: 1 for equal-width splits and flex: auto when you want sizes to follow the content.
QWhen should I use the flex shorthand instead of the individual sub-properties?
AIn most cases the flex shorthand is the better choice because it sets flex-grow, flex-shrink and flex-basis in one declaration and avoids the surprise of flex-basis falling back to the default 0 when you only write flex-grow. It also communicates intent at a glance, making the base size explicit and easier to review than three scattered declarations. Use the longhand properties only when you need to override a single sub-property, for example changing only flex-basis inside a media query.
QWhy does text inside flex: 1 items wrap or get squashed?
AThis is caused by the default min-width: auto of flex items: when space runs out, the minimum size of an item is derived from its content, so long text keeps the item wide and the text wraps or overflows. Fix it by setting min-width: 0 on the item (min-height: 0 for the column direction) and combine it with overflow: hidden and text-overflow: ellipsis to get a single-line truncation.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Flex Grow
Controls how much a flex item grows
Main Axis Direction
Defines the direction of the main axis in a flex layout
