A propriedade flex do CSS, define como um ítem será posicionado para no espaço disponível dentro de seu container.

Experimente

flex: 1;

flex: 2;

flex: 1 30px;

flex: 1 1 100px;

<section>  <div>Change me</div>  <div>flex: 1</div>  <div>flex: 1</div></section>

.default-example {  border: 1px solid #c5c5c5;  width: auto;  max-height: 300px;  display: flex;}.default-example > div {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;  margin: 10px;  flex-grow: 1;  flex-shrink: 1;  flex-basis: 0;}#example-element {  background-color: rgba(255, 0, 200, 0.2);  border: 3px solid rebeccapurple;}

Propriedades

Esta propriedade é uma abreviação das seguintes propriedades CSS:

• flex-grow
• flex-shrink
• flex-basis

<div>  <div>auto</div>  <div>auto</div>  <div>auto</div></div><div>  <div>auto</div>  <div>initial</div>  <div>initial</div></div><div>  <div>auto</div>  <div>auto</div>  <div>none</div></div><div>  <div>initial</div>  <div>none</div>  <div>none</div></div><div>  <div>4</div>  <div>2</div>  <div>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;}

By default flex items don't shrink below their minimum content size. To change this, set the item'smin-width ormin-height.

Sintaxe

/* Propriedades principais */flex: auto;flex: initial;flex: none;/* Valor único, sem unidade: flex-grow */flex: 2;/* Valor único, unidade width/height: flex-basis */flex: 10em;flex: 30%;flex: min-content;/* Dois valores: flex-grow | flex-basis */flex: 1 30px;/* Dois valores: flex-grow | flex-shrink */flex: 2 2;/* Três valores: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%;/* Valores globais */flex: inherit;flex: initial;flex: unset;

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

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

  • a<number>: In this case it is interpreted asflex: <number> 1 0; the<flex-shrink> value is assumed to be 1 and the<flex-basis> value is assumed to be0.
  • one of the keywords:none,auto, orinitial.

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

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

• Three-value syntax: the values must be in the following order:

  1. a<number> for<flex-grow>.
  2. a<number> for<flex-shrink>.
  3. a valid value forwidth for<flex-basis>.

Values

initial

The item is sized according to itswidth andheight 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 itswidth andheight 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 itswidth andheight 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".

<'flex-grow'>

Defines theflex-grow of the flex item. Negative values are considered invalid. Defaults to1 when omitted.

<'flex-shrink'>

Defines theflex-shrink of the flex item. Negative values are considered invalid. Defaults to1 when omitted.

<'flex-basis'>

Defines theflex-basis of the flex item. A preferred size of0 must have a unit to avoid being interpreted as a flexibility. Defaults to0 when omitted.

Formal syntax

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

<flex-grow> =
<number [0,∞]>

<flex-shrink> =
<number [0,∞]>

<flex-basis> =
content|
<'width'>

<width> =
auto|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>|
stretch|
fit-content|
contain

<length-percentage> =
<length>|
<percentage>

<calc-size()> =
calc-size(<calc-size-basis> ,<calc-sum>)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<calc-size-basis> =
<size-keyword>|
<calc-size()>|
any|
<calc-sum>

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Example

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

<div>  <div>Flex box (click to toggle raw box)</div>  <div>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

Compatibilidade com navegadores

See also

• CSS Flexbox Guide:Basic Concepts of Flexbox
• CSS Flexbox Guide:Controlling Ratios of flex items along the main axis