Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
L'alignement des boîtes avec Flexbox
Le module de spécificationBox 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, voirla page principale sur cette spécification.
Exemple simple
Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avecjustify-content et sur l'axe secondaire grâce àalign-items. Le premier objet surcharge l'alignement fourni paralign-items en utilisantcenter comme valeur pour la propriétéalign-self.
Liens entre les axes etflex-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 utilisejustify-content avecflex-end, les éléments seront alignés à la fin du conteneur flexible. Si on utiliseflex-direction avec la valeurrow, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).
Toutefois,Flexbox permet de modifier l'axe principal en utilisantflex-direction avec la valeurcolumn. 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 dejustify-self pourFlexbox
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. Avecjustify-content: flex-end, l'espace supplémentaire sera ajouté avant les éléments et avecjustify-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 avecauto. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avecauto, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.
En utilisantmargin avecauto 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ésgap
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 queflex-wrap vaillewrap afin querow-gap ait un effet.
Note :À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétésgap 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.