Quelle est la différence entre align-content et align-items?
Quelqu'un peut-il me montrer la différence entre align-items et align-content?
La propriété align-items de flex-box aligne les éléments d'un conteneur Flex le long de l'axe transversal, comme le fait justify-content le long de l'axe principal. (Par défaut, flex-direction: row, l'axe transversal correspond à la verticale et l'axe principal à l'horizontale. Avec flex-direction: column, ces deux paramètres sont interchangés).
Voici un exemple de l'apparence de align-items:center:
Mais align-content est destiné aux boîtes flexibles multilignes. Cela n'a aucun effet lorsque les éléments sont sur une seule ligne. Il aligne la structure entière en fonction de sa valeur. Voici un exemple pour align-content: space-around;: 
Et voici à quoi ressemble align-content: space-around; avec align-items:center: 
Notez que la 3ème case et toutes les autres cases de la première ligne sont centrées verticalement sur cette ligne.
Voici quelques liens de codepen pour jouer avec:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
Voici un stylo super cool qui montre et vous permet de jouer avec presque tout en flexbox.
Tout d'abord, align-items concerne les éléments d'une seule ligne. Donc, pour une seule rangée d’éléments sur l’axe principal , align-items alignera ces éléments les uns par rapport aux autres et commencera par une nouvelle perspective à partir de la rangée suivante.
Maintenant, align-content n'interfère pas avec les éléments d'une ligne mais avec les lignes elles-mêmes . Par conséquent, align-content essaiera d'aligner les lignes les unes par rapport aux autres et de modifier le conteneur.
Vérifiez ce violon: https://jsfiddle.net/htym5zkn/8/
Je trouve l'exemple http://flexboxfroggy.com/ très utile.
Cela vous prendra 10-20 minutes et au niveau 21, vous trouverez la réponse à votre question. Il a mentionné:
align-content détermine l'espacement entre les lignes, tandis que align-items détermine comment les éléments dans leur ensemble sont alignés dans le conteneur. Lorsqu'il n'y a qu'une seule ligne, align-content n'a aucun effet
Eh bien, je les ai examinés sur mon navigateur.
align-content peut modifier la hauteur d'une ligne pour le sens de la ligne ou la largeur d'une colonne lorsque sa valeur est stretch, ou ajouter un espace vide entre ou autour des lignes pour space-between, space-around, flex-start , flex-end values.
align-items peut modifier la hauteur ou la position des éléments dans la zone de la ligne. Lorsque les éléments ne sont pas encapsulés, ils n'ont qu'une ligne dont la zone est toujours étendue à la zone de la boîte flexible (même si les éléments débordent), et align-content n'a pas d'effet sur une seule ligne. Ainsi, cela n’a aucun effet sur les éléments non encapsulés et seul align-items peut modifier leur position ou les étirer lorsque tous les éléments se trouvent sur une seule ligne.
Cependant, s'ils sont encapsulés, vous avez plusieurs lignes et éléments à l'intérieur de chaque ligne. Et si tous les éléments de chaque ligne ont la même hauteur (pour le sens des lignes), la hauteur de cette ligne sera égale à la hauteur de ces éléments et vous ne verrez aucun effet en modifiant la valeur de align-items.
Ainsi, si vous souhaitez affecter des éléments de align-items lorsque vos éléments sont encapsulés et ont la même hauteur (pour le sens des lignes), vous devez d'abord utiliser align-content avec une valeur d'étirement afin de développer la zone de lignes.
J'ai eu la même confusion. Après quelques retouches basées sur la plupart des réponses ci-dessus, je peux enfin voir les différences. À mon humble avis, la distinction est mieux démontrée avec un conteneur flexible qui remplit les deux conditions suivantes:
- Le conteneur Flex lui-même a une contrainte de hauteur (par exemple,
min-height: 60rem) et peut donc devenir trop grand pour son contenu - Les articles enfants inclus dans le conteneur ont des hauteurs irrégulières
La condition 1 m'aide à comprendre ce que content signifie par rapport à son conteneur parent. Lorsque le contenu est aligné avec le conteneur, nous ne pourrons voir aucun effet de positionnement provenant de align-content. Ce n'est que lorsque nous avons un espace supplémentaire le long de l'axe transversal que nous commençons à voir son effet: il aligne le contenu par rapport aux limites du conteneur parent.
La condition 2 m'aide à visualiser les effets de align-items: elle aligne les éléments les uns par rapport aux autres.
Voici un exemple de code. Les matières premières proviennent de tutoriel CSS Grid de Wes Bos (21. Flexbox vs. CSS Grid)
- Exemple HTML:
<div class="flex-container">
<div class="item">Short</div>
<div class="item">Longerrrrrrrrrrrrrr</div>
<div class="item">????</div>
<div class="item" id="tall">This is Many Words</div>
<div class="item">Lorem, ipsum.</div>
<div class="item">10</div>
<div class="item">Snickers</div>
<div class="item">Wes Is Cool</div>
<div class="item">Short</div>
</div>
- Exemple CSS:
.flex-container {
display: flex;
/*dictates a min-height*/
min-height: 60rem;
flex-flow: row wrap;
border: 5px solid white;
justify-content: center;
align-items: center;
align-content: flex-start;
}
#tall {
/*intentionally made tall*/
min-height: 30rem;
}
.item {
margin: 10px;
max-height: 10rem;
}
Exemple 1 : Réduisons la fenêtre d'affichage afin que le contenu affleure avec le conteneur. C’est à ce moment-là que align-content: flex-start; n’a aucun effet, car le bloc de contenu entier est parfaitement ajusté à l’intérieur du conteneur (aucune autre pièce pour le repositionnement!)
Notez également la deuxième ligne - voyez comment les éléments sont alignés au centre les uns des autres.
Exemple 2 : Au fur et à mesure que nous élargissons la fenêtre d'affichage, nous n'avons plus assez de contenu pour remplir le conteneur en entier. Nous commençons maintenant à voir les effets de align-content: flex-start;-- il aligne le contenu par rapport au bord supérieur du conteneur. 
Ces exemples sont basés sur flexbox, mais les mêmes principes sont applicables à la grille CSS. J'espère que cela t'aides :)
align-content
align-content contrôle l'axe transversal (c'est-à-dire la direction verticale si le flex-direction est row et horizontal si le flex-direction est column) le positionnement de multiple lignes relatives les unes aux autres.
(Imaginez les lignes d’un paragraphe verticalement étendu, empilé vers le haut, empilé vers le bas. C’est sous le paradigme de la rangée flex-direction).
align-items
align-items contrôle l'axe transversal d'une ligne individuelle d'éléments flexibles.
(Pensez à la façon dont une ligne d’un paragraphe est alignée, si elle contient du texte normal et un texte plus grand, comme des équations mathématiques. Dans ce cas, sera-t-il le bas, le haut ou le centre de chaque type de texte dans une ligne qui être aligné?)
La principale différence est lorsque la hauteur des éléments n'est pas la même! Ensuite, vous pouvez voir comment dans la rangée, ils sont tous centrés\end\start
selon ce que j'ai compris de ici :
lorsque vous utilisez un élément d'alignement ou un élément de justification, vous ajustez "le contenu à l'intérieur d'un élément de grille le long de l'axe de la colonne ou de l'axe de la ligne, respectivement.
Mais si vous utilisez align-content ou justification-content, vous définissez la position d'une grille le long de l'axe des colonnes ou de la ligne. cela se produit lorsque vous avez une grille dans un conteneur plus grand et que la largeur ou la hauteur sont inflexibles (avec px).