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-directionet 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.