Was ist der Unterschied zwischen align-content und align-items?

Question

Was ist der Unterschied zwischen align-items und align-content?

Answer 1

Was ich aus jeder Antwort und dem Besuch des Blogs gelernt habe ist

was die Kreuzachse und Hauptachse sind

• Hauptachse ist horizontale Reihe und Kreuzachse ist vertikale Spalte - für flex-direction: row
• Hauptachse ist vertikale Spalte und Kreuzachse ist horizontale Reihe - für flex-direction: column

Jetzt align-content und align-items

align-content ist für die Reihe, es funktioniert wenn der Container (mehr als eine Reihe) hat Eigenschaften von align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

align-items ist für die Elemente in der Reihe Eigenschaften von align-items

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

Für weitere Informationen besuchen Sie flex

Answer 2

Während align-items sich als eine einzelne Zeile Text sowohl horizontal als auch vertikal in einem Container zentrieren würde, würde align-content sich verhalten, als ob es mehrere Zeilen Text oder einen Absatz geben würde und von oben ausgerichtet beginnen würde, selbst eine einzelne Textzeile, als ob es ein Absatz wäre, dem eine Textausrichtung: center-Regel gegeben wurde.

Dies ist das Ergebnis, das wir erhalten von

align-content:center;

Answer 3

Erster Teil

align-items gilt nur für eine einzelne Zeile von Boxen. Angenommen, es gibt 4 Boxen in einer einzigen Linie innerhalb des Containers, dann wird align-items angewendet, um diese Boxen in einer Linie auszurichten. Wenn die Flex-Richtung Reihe ist (was Standard ist), ordnet align-items die Boxen vertikal an, ist es Spalte, ordnet es die Boxen horizontal an.

Zweiter Teil

Fahren wir mit den obigen Boxen in einer einzigen Linie fort, wenn wir eine weitere Linie mit 4 Boxen hinzufügen, gibt es nun 8 Boxen, 4 in jeder Linie. Hier kommt align-content ins Spiel, wenn wir align-content auf den Container anwenden, wird es auf beide Linien mit insgesamt 8 Boxen angewendet. Wenn wir align-content:center anwenden, werden beide Linien im Container zentriert. In diesem Sinne wird align-content verwendet, um mehrzeilige flexible Boxen anzuordnen.

align-items: center, align-content: flex-start

Answer 4

Der Hauptunterschied besteht darin, wenn die Höhe der Elemente nicht gleich ist! Dann kann man sehen, wie sie alle in der Reihe zentriert sind\end\start

Answer 5

Gemäß dem, was ich von hier verstanden habe:

wenn Sie align-item oder justify-item verwenden, passen Sie "den Inhalt innerhalb eines Rasterobjekts entlang der Spaltenachse oder der Reihenachse" entsprechend an.

Aber: Wenn Sie align-content oder justify-content verwenden, legen Sie die Position eines Rasters entlang der Spaltenachse oder der Reihenachse fest. Dies tritt auf, wenn Sie ein Raster in einem größeren Container haben und Breite oder Höhe unflexibel sind (Verwendung von px).