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
The **`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
----------------------

This property is a shorthand for the following CSS properties:

* `flex-grow`
* `flex-shrink`
* `flex-basis`
Syntax
------


```css
/\* 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 valid value for `<flex-grow>`: then the shorthand expands to `flex: <flex-grow> 1 0`.
    + a valid value for `<flex-basis>`: then the shorthand expands to `flex: 1 1 <flex-basis>`.
    + the keyword `none` or one of the global keywords.
* **Two-value syntax:**
    + The first value must be a valid value for `flex-grow`.
    + The second value must be one of:
        - a valid value for `flex-shrink`: then the shorthand expands to `flex: <flex-grow> <flex-shrink> 0`.
        - a valid value for `flex-basis`: then the shorthand expands to `flex: <flex-grow> 1 <flex-basis>`.
* **Three-value syntax:** the values must be in the following order:
    1. a valid value for `flex-grow`.
    2. a valid value for `flex-shrink`.
    3. a valid value 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` of the flex item. Negative values are considered invalid. Defaults to `1` when omitted. (initial is `0`)

`<'flex-shrink'>`

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

`<'flex-basis'>`

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

<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` or `min-height`.

Formal definition
-----------------

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

Formal syntax
-------------
```

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

Examples
--------

### Setting flex: auto

This example shows how a flex item with `flex: auto` grows to absorb any free space in the container.

#### HTML


```html
<div id="flex-container">
  <div id="flex-auto">flex: auto (click to toggle raw box)</div>
  <div id="flex-initial">flex: initial</div>
</div>
```


#### CSS


```css
#flex-container {
  display: flex;
  font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
  padding: 1rem;
}

#flex-auto {
  flex: auto;
  border: 1px solid #f00;
}

#flex-initial {
  border: 1px solid #000;
}
```


#### JavaScript


```js
const flexAuto = document.getElementById("flex-auto");
const flexInitial = document.getElementById("flex-initial");
flexAuto.addEventListener("click", () => {
  flexInitial.style.display =
    flexInitial.style.display === "none" ? "block" : "none";
});
```


#### Result

The flex container contains two flex items:

* "flex: auto" has a `flex` value of `auto`
* "flex: initial" has a `flex` value of `initial`

The "flex: initial" item takes up as much space as its width requires, but does not expand to take up any more space. All the remaining space is taken up by "flex: auto".

When you click "flex: auto", we set "flex: initial"'s `display` property to `none`, removing it from the layout. The "flex: auto" item then expands to occupy all the available space in the container.

Specifications
--------------

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

Browser compatibility
---------------------

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*