J'ai eu la même confusion. Après quelques bricolages basés sur bon nombre 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 flexible lui-même a une contrainte de hauteur (par exemple,
min-height: 60rem) et peut donc devenir trop grand pour son contenu
- Les articles pour enfants enfermés dans le conteneur ont des hauteurs inégales
La condition 1 m'aide à comprendre ce que contentsignifie par rapport à son conteneur parent. Lorsque le contenu affleure le conteneur, nous ne pourrons pas voir les effets de positionnement en provenance 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 du didacticiel CSS Grid de Wes Bos (21. Flexbox vs. CSS Grid)
<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>
.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étrécissons la fenêtre d'affichage de sorte que le contenu affleure le conteneur. C'est quand align-content: flex-start;n'a aucun effet puisque tout le bloc de contenu est bien ajusté à l'intérieur du conteneur (pas de place supplémentaire pour le repositionnement!)
Notez également la 2e rangée - voyez comment les éléments sont alignés au centre entre eux.
Exemple 2 : à mesure que nous élargissons la fenêtre, nous n'avons plus suffisamment de contenu pour remplir le conteneur entier. Maintenant, nous commençons à voir les effets de align-content: flex-start;--it aligne le contenu par rapport au bord supérieur du conteneur.
Ces exemples sont basés sur flexbox, mais les mêmes principes s'appliquent à la grille CSS. J'espère que cela t'aides :)
