Flexbox : Quelle est la différence entre « align-items » et « align-content » ?

Flexbox : Comprendre les différences entre align-content et align-items

En ce qui concerne la mise en page flexbox, align-items et align- les propriétés de contenu servent à des fins distinctes dans l'alignement du contenu dans flex conteneurs.

align-items

align-items aligne les éléments le long de l'axe transversal du conteneur flexible. Cet axe transversal est perpendiculaire à la direction de l'axe principal, qui est déterminée par la propriété flex-direction. Par défaut, flex-direction: row, donc l'axe principal est horizontal et l'axe transversal est vertical.

align-items peut avoir différentes valeurs pour aligner les éléments verticalement : début, fin, centre, étirement et baseline.

align-content

En revanche, align-content aligne les lignes d'éléments dans un flex multiligne conteneur. Lorsqu'il n'y a qu'une seule ligne d'éléments, align-content n'a aucun effet. Cette propriété entre en jeu lorsque plusieurs lignes sont formées en raison de la largeur limitée du conteneur.

align-content prend également diverses valeurs :

• flex-start : les lignes d'éléments s'alignent vers le haut de leur espace contenant
• flex-end : les lignes d'éléments s'alignent vers le bas de leur espace contenant
• center : les lignes d'éléments s'alignent verticalement dans le centre de leur espace contenant
• espace entre : les lignes d'éléments se répartissent uniformément le long de l'axe vertical avec des espaces entre eux
• espace autour : les lignes d'éléments se répartissent uniformément le long de l'axe vertical avec des espaces les deux avant et après eux

Exemple

Considérez ce qui suit code:

.container {
  display: flex;
  flex-direction: row;
}

.item {
  align-items: center;
  align-content: space-around;
}

Dans cet exemple, align-items: center aligne les éléments enfants verticalement au centre de leur espace contenant, qui est l'élément. align-content : space-around aligne les lignes d'éléments verticalement, avec des espaces entre et après eux. Le résultat est une rangée d'éléments centrée verticalement avec des espaces entre chaque ligne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!