flex

The flex CSS property specifies how a flex item will grow or shrink so as to fit the space available in its flex container.

/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex: 2;
/* One value, unitless number: flex-grow */
flex: 2;
/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: 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: unset;

This is a shorthand property that sets flex-grow, flex-shrink, and flex-basis.

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:

<div class="flex-container">
   <div class="item auto">auto</div>
   <div class="item auto">auto</div>
   <div class="item auto">auto</div>
</div>
<div class="flex-container">
   <div class="item auto">auto</div>
   <div class="item initial">initial</div>
   <div class="item initial">initial</div>
</div>
<div class="flex-container">
   <div class="item auto">auto</div>
   <div class="item auto">auto</div>
   <div class="item none">none</div>
</div>
<div class="flex-container">
   <div class="item initial">initial</div>
   <div class="item none">none</div>
   <div class="item none">none</div>
</div>
<div class="flex-container">
   <div class="item four">4</div>
   <div class="item two">2</div>
   <div class="item one">1</div>
</div>

* {
  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;
}

Syntax

The flex property may be specified using one, two, or three values.

One-value syntax: the value must be one of:

• a unitless <number>: then it is interpreted as <flex-grow>.
• a valid value for width: then it is interpreted as <flex-basis>.
• one of the keyword values none, auto, or initial.

Two-value syntax: the first value must be a unitless <number> and it is interpreted as <flex-grow>. The second value must be one of:

• a unitless <number>: then it is interpreted as <flex-shrink>.
• a valid value for width: then it is interpreted as <flex-basis>.

Three-value syntax:

• the first value must be a unitless <number> and it is interpreted as <flex-grow>.
• the second value must be a unitless <number> and it is interpreted as <flex-shrink>.
• the third value must be a valid value for width and is interpreted as <flex-basis>.

Values

<'flex-grow'>

Defines the flex-grow of the flex item. See <number> for more details. Negative values are considered invalid. Defaults to 0 when omitted.

<'flex-shrink'>

Defines the flex-shrink of the flex item. See <number> for more details. Negative values are considered invalid. Defaults to 1 when omitted.

<'flex-basis'>

Defines the flex-basis of the flex item. Any value valid for width and height properties are accepted. A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to auto when omitted.

none

This keyword computes to 0 0 auto.

Formal syntax

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Example

#flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
}
#flex-container > .flex-item {
	-webkit-flex: auto;
	flex: auto;
}
#flex-container > .raw-item {
	width: 5rem;
}

<div id="flex-container">
    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
    <div class="raw-item" id="raw">Raw box</div>
</div>

var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
	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

Browser compatibility

[1] In Gecko 18.0 (Firefox 18.0 / Thunderbird 18.0 / SeaMonkey 2.15) and 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16) flexbox support is hidden behind the about:config preference layout.css.flexbox.enabled, defaulting to false.

[2] Multi-line flexbox is supported since Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25).

In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] Internet Explorer 10-11 (but not 12+) ignores uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info. Furthermore a flex declaration with a unitless value in its flex-basis part is considered syntactically invalid in those versions and will thus be ignored. A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.

See also

• Using CSS flexible boxes