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
La propriété **`flex`** est une propriété raccourcie qui définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur.

Les propriétés détaillées correspondantes à cette propriété raccourcie sont `flex-grow`, `flex-shrink` et `flex-basis`.

Les éléments flexibles peuvent être étirés ou réduits pour utiliser un espace proportionnel à leur coefficient de grossissement ou de rétrécissement afin de ne pas dépasser d'un conteneur.

Exemple interactif
------------------

Description
-----------

Pour la plupart des cas, on utilisera une des valeurs suivantes : `auto`, `initial`, `none` ou un nombre positif sans unité. Pour voir l'effet de ces valeurs, essayez de redimensionner les conteneurs flexibles ci-après :
```

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

.initial {
  flex: initial;
}

.auto {
  flex: auto;
}

.none {
  flex: none;
}

.four {
  flex: 4;
}

.two {
  flex: 2;
}

.one {
  flex: 1;
}
```


Par défaut, les éléments flexibles ne se rétrécissent pas en dessous de la taille minimale du contenu. Pour modifier ce comportement, il faudra paramétrer `min-width` ou `min-height`.

Voir la page Utiliser les boîtes flexibles (*flexbox*) CSS pour plus d'informations.

Syntaxe
-------


```css
/\* Valeurs de base \*/
flex: auto;
flex: initial;
flex: none;

/\* Une valeur sans unité pour flex-grow \*/
/\* flex-basis vaut alors 0 \*/
flex: 2;

/\* Une valeur, largeur/hauteur: flex-basis \*/
flex: 10em;
flex: 30px;
flex: content;

/\* Deux valeurs : flex-grow | flex-basis \*/
flex: 1 30px;

/\* Deux valeurs : flex-grow | flex-shrink \*/
/\* flex-basis vaut alors 0 \*/
flex: 2 2;

/\* Trois valeurs : flex-grow | flex-shrink | flex-basis \*/
flex: 2 2 10%;

/\* Valeurs globales \*/
flex: inherit;
flex: initial;
flex: unset;
```


La propriété `flex` peut être définie avec une, deux ou trois valeurs.

* **Avec une valeur**, la syntaxe doit être :
    + un nombre sans unité (`<number>`) : celui-ci est alors interprété comme la valeur de `<flex-grow>`
    + ou une valeur de largeur valide (`width`) : celle-ci est alors interprétée comme la valeur de `<flex-basis>`
    + ou le mot-clé `none`.
* **Avec deux valeurs**
    + la première doit être un nombre sans unité (`<number>`) qui correspond à la valeur de `<flex-grow>`.
    + la seconde valeur doit être :
        - un nombre sans unité (`<number>`) : celui-ci est alors interprété comme la valeur de `<flex-shrink>`
        - ou une valeur de largeur valide (`width`) : celle-ci est alors interprétée comme la valeur de `<flex-basis>`
* **Avec trois valeurs**
    + la première valeur doit être un nombre sans unité (`<number>`) : celui-ci est alors interprété comme la valeur de `<flex-grow>`
    + la deuxième valeur doit être un nombre sans unité (`<number>`) : celui-ci est alors interprété comme la valeur de `<flex-shrink>`
    + la troisième valeur doit être une valeur de largeur valide (`width`) : celle-ci est alors interprétée comme la valeur de `<flex-basis>`
### Valeurs

`auto`

L'élément est dimensionné selon ses propriétés `width` et `height` mais peut grandir pour absorber l'espace libre disponible dans le conteneur flexible ou rétrécir à sa taille minimale pour rentrer dans le conteneur. Cette valeur est équivalente à "`flex: 1 1 auto`".

`initial`

L'élément est dimensionné selon ses propriétés `width` et `height`. Ce comportement est équivalent à la valeur par défaut (`0 1 auto`). Si besoin, l'élément rétrécit à sa taille minimale pour rentrer dans le conteneur mais il ne grandira pas s'il y a de l'espace disponible dans ce conteneur. Ce mot-clé est équivalent à "`flex: 0 1 auto`".

`none`

L'élément est dimensionné par rapport à ses propriétés `width` et `height`. Il n'est pas flexible : il ne peut ni rétrécir ni grandir selon l'espace du conteneur flexible. Ce mot-clé est équivalent à "`flex: 0 0 auto`".

`<'flex-grow'>`

Voir `flex-grow`. Les valeurs négatives sont interdites et la valeur par défaut est `1`.

`<'flex-shrink'>`

Voir `flex-shrink`. Les valeurs négatives sont interdites et la valeur par défaut est `1`.

`<'flex-basis'>`

Voir `flex-basis`. Une valeur valide pour `width` et `height`. La valeur par défaut est `0`.


**Note :** Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, `flex-basis` vaudra 0. Pour plus d'informations, voir le brouillon de spécification du module des boîtes flexibles.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `flex-grow`: `0`
* `flex-shrink`: `1`
* `flex-basis`: `auto`
 |
| Applicabilité | éléments flexibles, y compris les pseudo-éléments intégrés dans le flux |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `flex-grow`: comme spécifié
* `flex-shrink`: comme spécifié
* `flex-basis`: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues
 |
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :* `flex-grow`: un nombre
* `flex-shrink`: un nombre
* `flex-basis`: une longueur, pourcentage ou calc() ;
 |

Syntaxe formelle
----------------
```

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

Exemples
--------

### CSS


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

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

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

### HTML


```html
<div id="flex-container">
  <div class="flex-item" id="flex">
    Boîte flexible (cliquez pour basculer l’affichage de la boîte « normale »)
  </div>
  <div class="raw-item" id="raw">Boîte « normale »</div>
</div>
```

### JavaScript


```js
var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function () {
  raw.style.display = raw.style.display == "none" ? "block" : "none";
});
```



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

### Résultat

Spécifications
--------------

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

Compatibilité des navigateurs
-----------------------------

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

Voir aussi
----------

* Guide sur les boîtes flexibles : *Les concepts de bases*
* Guide sur les boîtes flexibles : *Contrôler les proportions des boîtes flexibles le long de l'axe principal*