Aligner des boîtes dans des boîtes flexibles

Exemple simple

Dans cet exemple de boîte flexible, trois éléments flexibles sont alignés sur l'axe principal à l'aide de justify-content et sur l'axe secondaire à l'aide de align-items. Le premier élément remplace les valeurs de align-items définies sur le groupe en définissant align-self sur center.

body {
  font-family: sans-serif;
}
.boite > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

<div class="boite">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois <br />a <br />du <br />texte <br />supplémentaire</div>
</div>

.boite {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border: 2px dotted rgb(96 139 168);
}

.boite :first-child {
  align-self: center;
}

Liens entre les axes et flex-direction

Les boîtes flexibles respectent le mode d'écriture du document, donc si vous travaillez en français et que vous définissez justify-content sur flex-end, ça aligne les éléments à la fin du conteneur flexible. Si vous travaillez avec flex-direction défini sur row, cet alignement se fait dans la direction en ligne.

Cependant, dans les boîtes flexibles, vous pouvez changer l'axe principal en définissant flex-direction sur column. Dans ce cas, justify-content aligne les éléments dans la direction de bloc. Il est donc plus facile de penser en termes d'axe principal et d'axe secondaire lorsqu'on travaille avec les boîtes flexibles :

• L'axe principal = direction définie par flex-direction = alignement avec justify-content
• L'axe secondaire = perpendiculaire à l'axe principal = alignement avec align-content, align-self/align-items

Alignement sur l'axe principal

• justify-content

Alignement sur l'axe secondaire

• align-self
• align-items
• align-content

Absence de justify-self pour les boîtes flexibles

Sur l'axe principal, les boîtes flexibles considèrent les éléments flexibles comme un groupe. La quantité d'espace nécessaire pour disposer les éléments est calculée, et l'espace restant est ensuite disponible pour la distribution. La propriété justify-content contrôle comment cet espace restant est utilisé. Avec justify-content: flex-end, l'espace supplémentaire est placé avant les éléments, avec justify-content: space-around, il est placé de chaque côté de l'élément dans cette dimension, etc.

Cela signifie qu'une propriété justify-self n'a pas de sens dans les boîtes flexibles, car nous traitons toujours le déplacement de l'ensemble du groupe d'éléments.

Sur l'axe secondaire, align-self a du sens, car il peut y avoir un espace supplémentaire dans le conteneur flexible dans cette dimension, dans lequel un seul élément peut être déplacé vers le début ou la fin.

Alignement et marges automatiques

Il existe un cas d'utilisation spécifique dans les boîtes flexibles où l'on peut penser qu'une propriété justify-self est nécessaire, et c'est lorsque l'on souhaite séparer un ensemble d'éléments flexibles, peut-être pour créer un modèle de navigation fractionnée. Pour ce cas d'utilisation, nous pouvons utiliser une marge auto. Une marge définie sur auto absorbe tout l'espace disponible dans sa dimension. C'est ainsi que fonctionne le centrage d'un bloc avec des marges automatiques. En définissant la marge gauche et droite sur auto, les deux côtés de notre bloc essaient de prendre tout l'espace disponible et poussent ainsi la boîte au centre.

En définissant une marge (margin) à auto sur un élément d'un ensemble d'éléments flexibles tous alignés au début, nous pouvons créer une navigation fractionnée. Cela fonctionne bien avec les boîtes flexibles et les propriétés d'alignement. Dès qu'il n'y a plus d'espace disponible pour la marge automatique, l'élément se comporte de la même manière que tous les autres éléments flexibles et se réduit pour essayer de s'adapter à l'espace disponible.

<div class="boîte">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois</div>
  <div class="pousse">Quatre</div>
  <div>Cinq</div>
</div>

.boîte {
  display: flex;
  border: 2px dotted rgb(96 139 168);
}
.pousse {
  margin-left: auto;
}

Les propriétés gap

• row-gap
• column-gap
• gap

Créer des gouttières fixes entre chaque objet

Sur l'axe principal, la propriété column-gap permet de créer des gouttières de taille fixe entre les éléments adjacents.

Sur l'axe secondaire, la propriété row-gap crée un espacement entre les lignes flexibles adjacentes, donc flex-wrap doit également être défini sur wrap pour que cela ait un effet.

<div class="boite">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois</div>
  <div>Quatre</div>
  <div>Cinq</div>
  <div>Six</div>
</div>

.boite {
  width: 450px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 2em;
  border: 2px dotted rgb(96 139 168);
}

.boite > * {
  flex: 1;
}

Voir aussi

• Le module d'alignement de boîtes CSS
• Aperçu de l'alignement des boîtes
• Alignement des boîtes dans une grille CSS
• Alignement des boîtes dans une disposition multi-colonnes
• Alignement des boîtes pour les dispositions bloc, positionnées absolument et tableaux
• Alignement des éléments dans un conteneur flexible
• L'entrée de glossaire Axe secondaire
• L'entrée de glossaire Axe principal