L'alignement des boîtes avec Flexbox
Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (flexbox). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.
Exemple simple
Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avec justify-content
et sur l'axe secondaire grâce à align-items
. Le premier objet surcharge l'alignement fourni par align-items
en utilisant center
comme valeur pour la propriété align-self
.
Liens entre les axes et flex-direction
Les boîtes flexibles respectent le mode d'écriture du document. Aussi, si on travaille sur un document en français et qu'on utilise justify-content
avec flex-end
, les éléments seront alignés à la fin du conteneur flexible. Si on utilise flex-direction
avec la valeur row
, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).
Toutefois, Flexbox permet de modifier l'axe principal en utilisant flex-direction
avec la valeur column
. Dans ce cas, justify-content
alignera les objets selon la direction de bloc. Aussi, mieux vaut penser en termes d'axes principal (main axis) et d'axe secondaire (cross axis) lorsqu'on travaille sur des boîtes flexibles :
- L'axe principal correspond à la direction fournie par
flex-direction
et l'alignement sur cet axe s'effectue avecjustify-content
- L'axe secondaire est orthogonal à l'axe principal et l'alignement s'effectue avec
align-content
,align-self
/align-items
Alignement sur l'axe principal
Alignement sur l'axe secondaire
Absence de justify-self
pour Flexbox
Sur l'axe principal et avec les boîtes flexibles, le contenu est considéré comme un seul groupe. La quantité d'espace nécessaire est calculée pour disposer les différents éléments et l'espace restant peut être réparti. La propriété justify-content
contrôle la répartition de cet espace. Avec justify-content: flex-end
, l'espace supplémentaire sera ajouté avant les éléments et avec justify-content: space-around
, il sera placé de chaque côté.
Autrement dit, justify-self
n'a pas de sens pour les boîtes flexibles car le contenu est considéré comme un seul « tenant » qui est déplacé.
Pour l'axe secondaire, align-self
peut être pertinent car il peut y avoir un espace supplémentaire sur cet axe et selon lequel on peut déplacer un seul des éléments.
Alignement et marges automatiques
justify-self
pourrait être utile lorsqu'on souhaite séparer un ensemble d'éléments flexibles pour créer un menu de navigation. Dans ce cas, on peut utiliser des marges automatiques avec auto
. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avec auto
, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.
En utilisant margin
avec auto
sur un élément d'un ensemble d'éléments flexibles alignés vers le début, on peut créer un tel effet. Dès qu'il n'y a plus d'espace disponible pour les marges automatiques, l'objet se comporte comme les autres objets flexibles et se réduit pour s'inscrire dans l'espace disponible.
Les propriétés gap
Créer des gouttières fixes entre chaque objet
Sur l'axe principal, la propriété column-gap
permettra de créer des gouttières de taille fixe de chaque côté de l'objet.
Sur l'axe secondaire, row-gap
permettra d'espace les lignes adjacentes. Aussi, il faut que flex-wrap
vaille wrap
afin que row-gap
ait un effet.
Note : À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétés gap
pour les boîtes flexibles. En effet, le comportement de ces propriétés pour les dispositions flexibles est un ajout récent à la spécification.