Le module de disposition des boîtes flexibles CSS (CSS Flexible Box Layout) est un module de CSS qui définit un modèle de boîtes optimisé pour la conception des interfaces utilisateurs. En utilisant le modèle des boîtes flexibles, les éléments d'une conteneur flexible peuvent être disposés dans n'importe quelle direction et étendre leurs dimensions (pour remplir un espace vide) ou se réduire pour éviter de dépasser en dehors de l'élément parent. On peut facilement manipuler l'alignement horizontal ou vertical des éléments fils. On peut aussi imbriquer plusieurs niveaux de boîtes flexibles afin de construire des dispositions en deux dimensions..

Exemple

Dans l'exemple qui suit, on utilise display: flex pour un conteneur. Cela signifie que les trois éléments fils deviennent des éléments flexibles. La propriété justify-content a été paramétrée avec la valeur space-between afin d'espacer les éléments de façon égale le long de l'axe principal. Ainsi, on a le même espace à droite et à gauche de chaque élément et, aux extrêmités du conteneur, les bords des éléments fils qui sont alignés avec les bords du conteneur. On peut également voir que les éléments sont étirés le long de l'axe orthogonale (cross axis) car la valeur par défaut de la propriété align-items est stretch. Ainsi, les éléments flexibles s'étirent pour occuper toute la hauteur du conteneur flexible, ils sont donc aussi grand que le plus grand des éléments.

Référence

Propriétés CSS

Guides

Les concepts de bases relatifs aux boîtes flexibles
Un aperçu des différentes fonctionnalités offerts par les boîtes flexibles.
Les relations entre la disposition flexbox et les autres méthodes de disposition
Cet article décrit les relations entre la disposition avec les boîtes flexibles et les autres méthodes et/ou spécifications CSS.
Manipuler les boîtes flexibles CSS
Un tutoriel pas-à-pas qui illustre comment construire des dispositions grâce à cette fonctionnalité.
Utiliser les boîtes flexibles pour les dispositions des applications web
Un tutoriel qui explique comment utiliser les boîtes flexibles dans le cadre des applications web.

Ressources externes

Spécifications

Spécification État Commentaires
CSS Flexible Box Layout Module Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support simple 20.0 (20.0) 21.0-webkit
29.0
10.0-ms
11.0
12.10 6.1-webkit
Fonctionnalité Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Support simple (Oui) 4.4 11 12.10 7.1-webkit

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, fscholz
 Dernière mise à jour par : SphinxKnight,