Attribut FLEX

Rôle

L’attribut flex permet de gérer la flexibilité d’un flex-item (élément enfant) d’un flex-container (élément parent)

Le flex-container correspond à n’importe quel bloc qui contient des enfants (flex-item) sur lequel on va appliquer le modèle de boîte flexible (display:flex)

Par défaut, l’espace occupé par chaque item se limite à son contenu. La propriété flex va permettre à un item de s’étirer et d’occuper l’espace disponible. Si tous les items ont leur valeur flex défini à 1, chaque enfant aura le même espace dans le conteneur. La valeur de flex ne correspond pas à une unité mais à une proportion : un item avec un flex de 2 occupera deux fois plus d’espace que les autres

Cet attribut est un raccourci de :

• flex-grow spécifie combien de fois l’élément va s’étirer par rapport au reste des éléments flexibles à l’intérieur du même conteneur. Par défaut cette valeur vaut 0
• flex-shrink : spécifie comment l’élément va diminuer par rapport au reste des éléments flexibles à l’intérieur du même conteneur. Par défaut cette valeurt vaut 1
• flex-basis : spécifie la longueur initiale d’un élément flexible. Par défaut cette valeur est ‘auto’

 Note : voir notre tutoriel sur le modèle flex-box

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.flex

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

.rowflex{
  display : flex;
  border : thin solid silver;  
  width : 700px;
}
.rowflex div{
  height: 30px;
}
.rowflex .milieu{
  flex: 1;
  background-color: orange;
}
.rowflex .gauche{
  flex: 2;
  background-color: pink;
}
.rowflex .droite{
  flex: 4;
  background-color: silver;
}

– Le code HTML

<div class="rowflex">
    <div class="gauche">gauche</div>
    <div class="milieu">milieu</div>
    <div class="droite">droite</div>
</div>

Résultat

Compatibilité

 21.0(-webkit-)  18.0(-moz-)  10.0(-ms-)  6.1(-webkit-)  12.1

Valeurs

Les différentes valeurs de l’attribut flex sont:

auto

Equivalent de flex : 1 1 auto
Syntaxe :
flex : 1 1 auto

none

Equivalent de flex : 0 0 auto
Syntaxe :
flex : 0 0 auto

flex-grow

Capacité à s’étirer (la valeur represente une proportion

Voir l’attribut flex-grow

flex-shrink

Capacité à se retrecir (la valeur represente une proportion)

Voir l’attribut flex-shrink

flex-basis

Largeur minimum de l’élément flexible

Voir l’attribut flex-basis

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
flex : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
flex : inherit

A voir aussi

display– clear– z-index– align-content– align-items– align-self– vertical-align