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. Using the flex shorthand is recommended over setting individual properties. The shorthand automatically sets appropriate initial values for omitted components, preventing unintended behavior.

Sample Code

style.css

/* 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)

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 */
}

Sample Page

View sample page

Common Mistakes

/* NG: Setting flex on the flex container has no effect. */
/* flex is a property for child elements (flex items). */
.container { flex: 1;} /* has no effect (use display: flex instead) */

/* OK: Set display: flex on the parent, and flex on the children. */
.container { display: flex;}
.item { flex: 1;}

/* NG: Even with flex: 1;, items may not shrink as expected */
/* because min-width defaults to auto. */
.item { flex: 1;} /* may not shrink correctly when content is long */

/* OK: Add min-width: 0; to ensure items can shrink properly. */
.item { flex: 1; min-width: 0;}

The most common mistake is confusing which element gets which property. Set 'display: flex' on the parent (container) and 'flex' on the children (items).

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'.