The This property is a shorthand for the following CSS properties:flex
CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.Try it
Constituent properties
flex-grow
flex-shrink
flex-basis
Syntax
/* Keyword values */
flex: auto;
flex: initial;
flex: none;
/* One value, unitless number: flex-grow
flex-basis is then equal to 0. */
flex: 2;
/* One value, width/height: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Global values */
flex: inherit;
flex: initial;
flex: revert;
flex: revert-layer;
flex: unset;
The flex
property may be specified using one, two, or three values.
- One-value syntax: the value must be one of:
- a
: In this case it is interpreted as
flex: 1 0
; theflex-shrink
value is assumed to be1
and theflex-basis
value is assumed to be0
. - a
: In this case it is interpreted as
flex: 1 1
; theflex-grow
value is assumed to be1
and theflex-shrink
value is assumed to be1
. - one of the
keywords:
none
,auto
, orinitial
.
- a
- Two-value syntax:
- The first value must be:
- a
and it is interpreted as
.
- a
- The second value must be one of:
- a
: then it is interpreted as
.
- a valid value for
width
: then it is interpreted as.
- a
- The first value must be:
- Three-value syntax: the values must be in the following order:
- a
for
.
- a
for
.
- a valid value
for
width
for.
- a
Values
initial
The item is sized according to its width
and height
properties. It shrinks to its minimum size to fit the container, but
does not grow to absorb any extra free space in the flex container. This is equivalent to setting "flex: 0 1 auto
".
auto
The item is sized according to its width
and height
properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting "flex: 1 1 auto
".
none
The item is sized according to its width
and height
properties. It is
fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting "flex: 0 0 auto
".
Defines the flex-grow
of the flex item. Negative values are considered invalid. Defaults to 1
when omitted. [initial is 0
]
Defines the
flex-shrink
of the flex item. Negative values are considered invalid. Defaults to 1
when omitted. [initial is 1
]
Defines the flex-basis
of the flex item. A preferred size of 0
must have a unit to avoid being interpreted as a flexibility. Defaults to
0
when omitted. [initial is auto
]
Description
For most purposes, authors should set flex
to one of the following values: auto
, initial
, none
, or a positive unitless number. To see the effect of these values, try resizing the flex containers
below:
auto
auto
auto
auto
initial
initial
auto
auto
none
initial
none
none
4
2
1
* {
box-sizing: border-box;
}
.flex-container {
background-color: #f4f7f8;
resize: horizontal;
overflow: hidden;
display: flex;
margin: 1em;
}
.item {
margin: 1em;
padding: 0.5em;
width: 110px;
min-width: 0;
background-color: #1b5385;
color: white;
font-family: monospace;
font-size: 13px;
}
.initial {
flex: initial;
}
.auto {
flex: auto;
}
.none {
flex: none;
}
.four {
flex: 4;
}
.two {
flex: 2;
}
.one {
flex: 1;
}
By default flex items don't shrink below their minimum content size. To change this, set the item's min-width
or min-height
.
Formal definition
Formal syntax
flex =
none |
[ ? || ]
Examples
Setting flex: auto
HTML
Flex box [click to toggle raw box]
Raw box
CSS
#flex-container {
display: flex;
flex-direction: row;
}
#flex-container > .flex-item {
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
const flex = document.getElementById["flex"];
const raw = document.getElementById["raw"];
flex.addEventListener["click", [] => {
raw.style.display = raw.style.display === "none" ? "block" : "none";
}];
#flex-container {
width: 100%;
font-family: Consolas, Arial, sans-serif;
}
#flex-container > div {
border: 1px solid #f00;
padding: 1rem;
}
#flex-container > .raw-item {
border: 1px solid #000;
}
Result
Specifications
Unknown specification # flex-property |
Browser compatibility
BCD tables only load in the browser