flex
====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
A propriedade flex do CSS, define como um ítem será posicionado para no espaço disponível dentro de seu container.

Experimente
-----------

Propriedades
------------

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

* `flex-grow` (en-US)
* `flex-shrink` (en-US)
* `flex-basis` (en-US)
```

<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;
}
```


By default flex items don't shrink below their minimum content size. To change this, set the item's `min-width` (en-US) or `min-height`.

Sintaxe
-------


```css
/\* 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;
```


The `flex` 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 as `flex: <number> 1 0`; the `<flex-shrink>` value is assumed to be 1 and the `<flex-basis>` value is assumed to be `0`.
    + one of the keywords: `none`, `auto`, or `initial`.
* **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 for `width`: 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 for `width` for `<flex-basis>`.
### 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`".

`<'flex-grow'>`

Defines the `flex-grow` (en-US) of the flex item. Negative values are considered invalid. Defaults to `1` when omitted.

`<'flex-shrink'>`

Defines the `flex-shrink` (en-US) of the flex item. Negative values are considered invalid. Defaults to `1` when omitted.

`<'flex-basis'>`

Defines the `flex-basis` (en-US) 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.

### Formal syntax
```

flex =   
  none                                                | (en-US)  
  [ (en-US) <'flex-grow'> <'flex-shrink'>? (en-US) || (en-US) <'flex-basis'> ] (en-US)    
  
```

Example
-------


```css
#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {
  flex: auto;
}

#flex-container > .raw-item {
  width: 5rem;
}
```



```html
<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
--------------

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-property |

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `flex-grow` (en-US): `0`
* `flex-shrink` (en-US): `1`
* `flex-basis` (en-US): `auto`
 |
| Aplica-se a | flex items, including in-flow pseudo-elements |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:* `flex-grow` (en-US): as specified
* `flex-shrink` (en-US): as specified
* `flex-basis` (en-US): as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `flex-grow` (en-US): a number
* `flex-shrink` (en-US): a number
* `flex-basis` (en-US): a length, percentage or calc();
 |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Controlling Ratios of flex items along the main axis (en-US)*