Quelle est la différence entre alignez-le contenu et alignez-les éléments?

D'abord, align-items est des éléments dans une seule ligne. Donc pour une seule rangée d'éléments sur axe principal, align-items permettra d'aligner ces éléments respectifs des uns et des autres et il va commencer avec un nouveau point de vue à partir de la ligne suivante.

Maintenant, align-content ne pas interférer avec les éléments dans une rangée, mais avec des lignes lui-même. Par conséquent, align-content essaye d'aligner des lignes par rapport à l'autre et flex conteneur.

Vérifier ce violon : https://jsfiddle.net/htym5zkn/8/

Bien j'ai vérifié sur mon navigateur.

align-content peut changer une ligne de hauteur de colonne de direction ou de largeur de colonne lorsque sa valeur est de tendre, ou ajouter un espace vide entre ou autour des lignes de space-between, space-around, flex-start, flex-end values.

align-items pouvez modifier les éléments de la hauteur ou la position à l'intérieur de la ligne de la zone. Lorsque les éléments ne sont pas enveloppés ils n'ont qu'une ligne de la zone est toujours tendue à la flex-zone de la boîte (même si les éléments de débordement), et align-content n'a aucun effet sur une seule ligne. Donc, il n'a aucun effet sur les éléments qui ne sont pas emballés et seulement align-items pouvez modifier les éléments de position ou de s'étirer quand ils sont tous sur une seule ligne.

Cependant, s'ils sont emballés, vous avez plusieurs lignes et les éléments à l'intérieur de chaque ligne. Et si tous les éléments de chaque ligne ont la même hauteur (pour l'orientation des rangs) que la ligne de hauteur sera égale à ceux des éléments de la hauteur et vous ne voyez aucun effet en changeant align-items valeur.

Donc, si vous voulez affecter des articles par align-items si vos articles sont emballés et ont la même hauteur (pour l'orientation des rangs) d'abord, vous devez utiliser align-content avec le bout de valeur afin de développer les lignes de la zone.

J'ai eu la même confusion. Après quelques retouches, basée sur de nombreuses réponses ci-dessus, je peux enfin voir les différences. À mon humble avis, la distinction est le mieux démontré avec un conteneur flex qui satisfait aux deux conditions suivantes:

1. Le flex conteneur lui-même a une hauteur de contrainte (par exemple, min-height: 60rem) et peut donc devenir trop grand pour son contenu
2. L'enfant les éléments situés dans le conteneur ont hauteur inégale

---

Condition 1 m'aide à comprendre ce que content signifie par rapport à son conteneur parent. Lorsque le contenu est aligné avec le conteneur, nous ne serons pas en mesure de voir tout le positionnement des effets à venir de align-content. C'est seulement lorsque nous avons de l'espace supplémentaire, le long de l'axe transversal, nous commençons à voir son effet: Il aligne le contenu par rapport à la limites du conteneur parent.

La Condition 2 m'aide à visualiser les effets de la align-items: il aligne les éléments les uns par rapport aux autres.

---

Voici un exemple de code. Les matières premières proviennent de Wes Bos Grille CSS tutoriel (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: Laissez étroites de la fenêtre d'affichage de sorte que le contenu est aligné avec le conteneur. C'est quand align-content: flex-start; n'a pas d'effets puisque l'ensemble du bloc de contenu est étroitement ajustement à l'intérieur du conteneur (pas de place supplémentaire pour le repositionnement!)

Aussi, la note de la 2ème rangée--voir comment les éléments sont au centre de la harmonisés entre eux.

Exemple 2: Comme nous l'avons élargir la fenêtre d'affichage, nous n'avons plus assez de contenu pour remplir l'ensemble du conteneur. Maintenant nous commençons à voir les effets de align-content: flex-start;--il aligne le contenu par rapport au bord supérieur du récipient.

---

Ces exemples sont basés sur flexbox, mais les mêmes principes sont applicables à la grille CSS. Espérons que cela aide 🙂

selon ce que j'ai compris de ici:

lorsque vous utilisez alignez-élément ou justifier-point, vous êtes en train d'ajuster le contenu à l'intérieur d'une grille de point le long de la de l'axe de la colonne ou de la ligne axe, respectivement.

Mais:
si vous utilisez alignez-le contenu ou justifier de contenu, vous définissez la position de la grille le long de l'axe des colonnes ou des le ligne axe. il se produit lorsque vous avez une grille dans un récipient plus grand et la largeur ou la hauteur sont rigides (à l'aide de px).