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

Question

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

Answer 1

Nun habe ich sie in meinem Browser überprüft.

align-content kann die Höhe einer Zeile in der Zeilenrichtung oder die Breite in der Spaltenrichtung ändern, wenn ihr Wert gestreckt ist, oder leeren Raum zwischen oder um die Zeilen für space-between, space-around, flex-start, flex-end Werte hinzufügen.

align-items kann die Höhe oder Position der Elemente innerhalb des Zeilenbereichs ändern. Wenn die Elemente nicht umbrochen sind, haben sie nur eine Zeile, deren Bereich immer auf den Flex-Box-Bereich gestreckt wird (auch wenn die Elemente überlaufen), und align-content hat keine Auswirkungen auf eine einzelne Zeile. Es hat also keine Auswirkungen auf Elemente, die nicht umbrochen sind, und nur align-items kann die Position oder Dehnung der Elemente ändern, wenn sie alle in einer einzigen Zeile sind.

Wenn sie jedoch umbrochen sind, haben Sie mehrere Zeilen und Elemente in jeder Zeile. Und wenn alle Elemente jeder Zeile die gleiche Höhe haben (in Zeilenrichtung), wird die Höhe dieser Zeile gleich der Höhe dieser Elemente sein und Sie sehen keine Auswirkungen durch Ändern des align-items-Werts.

Wenn Sie also Elemente durch align-items beeinflussen möchten, wenn Ihre Elemente umbrochen sind und die gleiche Höhe haben (in Zeilenrichtung), müssen Sie zuerst align-content mit dem Wert strecken verwenden, um den Bereich der Zeilen zu erweitern.

Answer 2

Einige Antworten haben korrekt identifiziert, dass align-content keine Auswirkungen hat, wenn der Flex-Inhalt nicht umgebrochen ist. Was sie jedoch nicht verstehen, ist, dass align-items immer noch eine wichtige Rolle spielt, wenn es um umbrochenen Inhalt geht:

In den folgenden beiden Beispielen wird align-items verwendet, um die Elemente innerhalb jeder Zeile zentrieren, dann ändern wir align-content, um die Wirkung zu sehen.

Beispiel 1:

align-content: flex-start;

Beispiel 2:

    align-content: flex-end;

Hier ist der Code:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

.container {
    display: flex;
    width: 300px;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-end;
    background: lightgray;
    height: 400px;
}
.child {
    padding: 12px;
    background: red;
    border: solid 1px black;
}

Answer 3

align-content

align-content steuert die Positionierung der Querachse (d.h. vertikale Richtung, wenn die flex-direction row ist, und horizontale Richtung, wenn die flex-direction column) von mehreren Zeilen zueinander.

(Denken Sie an Zeilen eines Absatzes, die vertikal verteilt sind, gestapelt oben oder gestapelt unten. Dies geschieht unter einem flex-direction Row-Paradigma).

align-items

align-items steuert die Querachse einer einzelnen Zeile von Flex-Elementen.

(Denken Sie daran, wie eine einzelne Zeile eines Absatzes ausgerichtet ist, wenn sie normalen Text und längeren Text wie mathematische Gleichungen enthält. In diesem Fall wird es der Boden, die Spitze oder die Mitte von jedem Texttyp in einer Zeile sein, der ausgerichtet wird?)

Answer 4

Die Schlüsseleigenschaft ist flex-wrap. Wenn nowrap ist (oder wenn es keinen zusätzlichen Platz in der Cross-Achse gibt), hat align-content keine Auswirkung. Wenn wrap oder wrap-reverse ist, hat es immer eine Auswirkung (unabhängig von der Zeilenanzahl), wenn es zusätzlichen Platz in der Cross-Achse gibt.

Vergleichen Sie diese vier Boxen:

Answer 5

align-items verteilt die Kinderelemente vertikal mit Abstand zwischen ihnen.

align-content gruppiert sie zusammen, als wären sie ein Element.

(wenn die Flex-Richtung Spalte ist)