Flexbox (CSS Flexible Box Layout) permet d'organiser des éléments dans un conteneur (appelé "conteneur Flex") de manière flexible. Les éléments du conteneur (appelés "éléments Flex") peuvent être développés ou réduits afin d'optimiser l'espace disponible dans celui-ci, tout en conservant l'ordre et l'espacement spécifiés. Flexbox est particulièrement utile si vous souhaitez aligner des éléments de tailles différentes sous forme de lignes ou de colonnes, les éléments plus volumineux prenant plus de place que les plus petits.
Paramètres de Flexbox
Les paramètres de Flexbox sont disponibles dans le panneau "Responsive" de l'onglet Flexbox.
Utiliser Flexbox
Pour utiliser Flexbox, cochez la case Utiliser Flexbox. L'élément parent actuel devient le conteneur Flex, et les propriétés Flexbox deviennent disponibles dans le panneau "Responsive".
Flexbox n'est pas disponible dans les cas suivants :
- L'élément parent actuel est un élément de texte tel que
<p>ou<h1>. - L'élément parent actuel contient des éléments intégrés tels que
<span>ou<a>. Cela ne s'applique pas si l'élément parent est une page.
Tout élément enfant direct du conteneur Flex devient un élément Flex. (Les calques de guide sont exclus.) Les éléments Flex sont organisés le long d'un axe principal, qui peut être horizontal ou vertical. Vous pouvez également configurer la direction de lecture du contenu le long de l'axe. L'orientation et la direction de Flexbox étant variables, les propriétés sont définies sur des valeurs telles que "flex-start" et "flex-end" plutôt que vers le haut, le bas, la gauche ou la droite.
Sens
La direction détermine la façon dont les éléments Flex sont organisés en définissant l'axe principal et la direction du flux le long de celui-ci.
| Sens | Comportement | Axe principal |
|---|---|---|
| row | Les éléments Flex sont organisés en lignes en suivant la direction du flux de texte (en partant de la gauche pour les langues qui se lisent de gauche à droite comme l'anglais). |
Horizontal |
| row-reverse | Les éléments Flex sont organisés en lignes en suivant la direction inverse du flux de texte (en partant de la droite pour les langues qui se lisent de gauche à droite comme l'anglais). |
Horizontal |
| column | Les éléments Flex sont organisés en colonnes, en suivant la direction du flux de contenu (généralement en partant du haut). |
Vertical |
| column-reverse | Les éléments Flex sont organisés en colonnes, en suivant la direction inverse du flux de contenu (généralement en partant du bas). |
Vertical |
Espacement
L'espacement détermine si les éléments Flex sont espacés automatiquement ou en fonction de distances fixes.
| Espacement | Comportement |
|---|---|
| Standard | Les éléments Flex sont automatiquement organisés dans le conteneur Flex en fonction des paramètres de justification, d'encapsulage et d'alignement spécifiés. |
| Fixe | Les éléments Flex sont disposés en fonction de l'espacement enfant spécifié et de l'espacement des limites. |
Justification
La justification détermine la façon dont les éléments Flex sont disposés le long de l'axe principal. Ce paramètre est disponible lorsque vous utilisez un espacement standard.
| Justification | Comportement |
|---|---|
| flex-start | Les éléments Flex sont regroupés au point de départ de la ligne ou de la colonne. |
| flex-end | Les éléments Flex sont regroupés au point de fin de la ligne ou de la colonne. |
| center | Les éléments Flex sont centrés le long de l'axe principal. |
| space-between | Les éléments Flex sont espacés uniformément le long de l'axe principal, les éléments de début et de fin étant situés sur les bords du conteneur. |
| space-around | Les éléments Flex sont espacés uniformément le long de l'axe principal, avec la moitié de cet espace de chaque côté. |
| space-evenly | Les éléments Flex sont espacés uniformément le long de l'axe principal, avec la même quantité d'espace de part et d'autre des éléments de début et de fin. |
Alignement transversal
L'alignement transversal correspond à la façon dont les éléments Flex sont disposés le long de l'axe transversal de la ligne ou colonne actuelle.
| Alignement transversal | Comportement |
|---|---|
| flex-start | Les éléments Flex sont placés au point de départ de l'axe transversal. |
| flex-end | Les éléments Flex sont placés au point de fin de l'axe transversal. |
| center | Les éléments Flex sont centrés le long de l'axe transversal. |
| stretch | Les éléments Flex sont étirés pour remplir l'espace disponible le long de l'axe transversal. |
| baseline | Les éléments Flex sont placés le long de l'axe transversal pour que leurs références soient alignées. |
Encapsulage
L'encapsulage détermine si le contenu est encapsulé dans le conteneur. Ce paramètre est disponible lorsque vous utilisez un espacement standard.
| Encapsulage | Comportement |
|---|---|
| nowrap | Les éléments Flex sont organisés sur une seule ligne ou dans une seule colonne. |
| wrap | Les éléments Flex peuvent être encapsulés pour former plusieurs lignes ou colonnes lorsqu'ils sont trop grands pour tenir sur une seule ligne. |
| wrap-reverse | Les éléments Flex peuvent être encapsulés pour former plusieurs lignes ou colonnes lorsqu'ils sont trop grands pour tenir sur une seule ligne. La direction de l'axe transversal est inversée. |
Alignement avec encapsulage
L'alignement avec encapsulage définit la manière dont les lignes ou les colonnes sont disposées le long de l'axe transversal (qui est perpendiculaire à l'axe principal) si le conteneur Flex comporte plusieurs lignes ou colonnes. Ce paramètre est disponible lorsque vous utilisez l'espacement standard et que l'encapsulage est activé.
| Alignement avec encapsulage | Comportement |
|---|---|
| flex-start | Les lignes ou les colonnes sont regroupées au point de départ du conteneur. |
| flex-end | Les lignes ou les colonnes sont regroupées au point de fin du conteneur. |
| center | Les lignes ou les colonnes sont centrées le long de l'axe transversal. |
| stretch | Les lignes ou les colonnes sont étirées pour remplir l'espace libre le long de l'axe transversal, sauf si leur hauteur est définie. |
| space-between | Les lignes ou les colonnes sont espacées uniformément le long de l'axe transversal, les lignes ou colonnes de début et de fin étant situées au niveau des bords du conteneur. |
| space-around | Les lignes ou les colonnes sont espacées uniformément le long de l'axe transversal, avec la moitié de cet espace de chaque côté. |
Espacement des éléments enfants
Il s'agit de la distance en pixels entre deux éléments dans le conteneur Flex. Ce paramètre est disponible lorsque vous utilisez un espacement fixe.
Espacement des limites
Il s'agit de la distance en pixels entre les éléments externes et le conteneur Flex. Ce paramètre est disponible lorsque vous utilisez un espacement fixe.
Ordre des enfants
Les éléments contenus dans Flexbox sont listés ici. Pour les réorganiser, faites-les glisser vers leur nouvel emplacement dans la liste.
Vous pouvez également déplacer des éléments Flex dans l'espace de création pour les réorganiser.
Propriétés des éléments enfants Flexbox
Les éléments Flex ont leurs propres propriétés. Sélectionnez l'enfant pour afficher et modifier ses paramètres Flexbox.
Bien que les éléments Flex puissent se développer ou se réduire, ils respectent des largeurs et des hauteurs minimales et maximales. Les propriétés "Gauche" et "Haut" sont désactivées, car les éléments Flex sont disposés en fonction des paramètres Flexbox, mais les propriétés de translation peuvent être utilisées pour décaler leur position.
Alignement transversal
L'alignement transversal d'un élément Flex remplace celui défini par défaut pour le conteneur.
| Alignement transversal | Comportement |
|---|---|
| auto | L'élément Flex utilise le paramètre d'alignement transversal pour le conteneur Flex. |
| baseline | La référence de l'élément Flex correspond à celles des autres éléments Flex avec alignement des références. |
| center | L'élément Flex est positionné au centre de l'axe transversal. |
| flex-end | L'élément Flex est positionné le long de l'axe transversal au point de fin du conteneur. |
| flex-start | L'élément Flex est positionné le long de l'axe transversal au point de départ du conteneur. |
| stretch | L'élément Flex s'étend jusqu'à remplir le conteneur le long de l'axe transversal, sauf si sa hauteur est définie. |
Développement Flex
Le facteur de croissance Flex détermine la croissance de l'élément Flex pour remplir l'espace disponible dans le conteneur Flex sur l'axe principal, par rapport aux facteurs de croissance Flex des autres éléments de la même ligne ou colonne. Ce paramètre est disponible lorsque vous utilisez un espacement standard.
Par exemple, si une ligne contient trois éléments Flex présentant des facteurs de développement Flex de 1, 1 et 2, le dernier élément occupera deux fois plus d'espace disponible sur la ligne que les autres éléments Flex.
Si le total de tous les facteurs de développement Flex pour les éléments d'une ligne ou d'une colonne est inférieur à 1, les éléments Flex peuvent ne pas utiliser tout l'espace disponible.
Lorsque le facteur de développement Flex est égal à 0, l'élément Flex ne s'agrandit pas.
Réduction Flex
Le facteur de réduction Flex détermine la réduction de l'élément Flex pour tenir dans le conteneur Flex sur l'axe principal, par rapport aux facteurs de réduction Flex des autres éléments de la même ligne ou colonne. Ce paramètre est disponible lorsque vous utilisez un espacement standard.
Par exemple, si une ligne contient trois éléments Flex ayant des facteurs de réduction de 1, 1 et 2, le dernier élément Flex sera réduit par rapport aux autres éléments Flex. Les facteurs de réduction Flex tiennent compte de la taille de l'élément Flex.
Lorsque le facteur de réduction Flex est égal à 0, l'élément Flex ne se réduit pas.