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

Question

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

Answer 1

Die align-items-Eigenschaft von Flexbox richtet die Elemente innerhalb eines Flex-Containers entlang der Cross-Achse aus, genau wie justify-content entlang der Hauptachse. (Für die Standard flex-direction: Zeile entspricht die Cross-Achse vertikal und die Hauptachse horizontal. Mit flex-direction: Spalte sind diese entsprechend vertauscht).

Hier ist ein Beispiel, wie align-items:center aussieht:

Aber align-content ist für mehrzeilige flexible Boxen. Es hat keinen Effekt, wenn sich die Elemente in einer einzelnen Linie befinden. Es richtet die gesamte Struktur entsprechend seinem Wert aus. Hier ist ein Beispiel für align-content: space-around;:

Und so sieht align-content: space-around; mit align-items:center aus:

Beachten Sie, dass sich das dritte Feld und alle anderen Felder in der ersten Linie in dieser Linie vertikal zentrieren.

Hier sind einige Codepen-Links zum Ausprobieren:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

Hier ist ein super cooler Stift, der alles im Flexbox zeigt und es Ihnen ermöglicht, damit zu experimentieren.

Answer 2

Vom Beispiel auf flexboxfroggy.com:

Es wird 10-20 Minuten dauern und auf Stufe 21 finden Sie die Antwort auf Ihre Frage.

align-content bestimmt den Abstand zwischen den Zeilen

align-items bestimmt, wie die Elemente als Ganzes innerhalb des Containers ausgerichtet sind.

Wenn es nur eine Zeile gibt, hat align-content keine Wirkung

Answer 3

Zuerst ist align-items für Elemente in einer einzelnen Reihe. Für eine einzelne Reihe von Elementen auf der Hauptachse wird align-items diese Elemente entsprechend zueinander ausrichten und mit einem frischen Blickwinkel in die nächste Zeile starten.

Jetzt greift align-content nicht in Elemente in einer Reihe ein, sondern in die Reihen selbst. Daher wird align-content versuchen, die Reihen in Bezug zueinander und zum Flex-Container auszurichten.

Überprüfen Sie dieses Beispiel: https://jsfiddle.net/htym5zkn/8/

Answer 4

Ich hatte dieselbe Verwirrung. Nachdem ich basierend auf vielen der obigen Antworten ein wenig herumprobiert habe, kann ich endlich die Unterschiede sehen. Meiner bescheidenen Meinung nach wird die Unterscheidung am besten mit einem Flex-Container demonstriert, der die folgenden beiden Bedingungen erfüllt:

1. Der Flex-Container selbst hat eine Höhenbeschränkung (z. B. min-height: 60rem) und kann daher zu hoch für seinen Inhalt werden
2. Die in den Container eingeschlossenen Kind-Elemente haben ungleiche Höhen

---

Bedingung 1 hilft mir zu verstehen, was Inhalt im Verhältnis zum Eltern-Container bedeutet. Wenn der Inhalt bündig mit dem Container ist, werden wir keine Positionierungseffekte sehen können, die von align-content ausgehen. Erst wenn wir zusätzlichen Platz entlang der Kreuzachse haben, beginnen wir, die Auswirkungen zu sehen: Er richtet den Inhalt relativ zu den Grenzen des Eltern-Containers aus.

Bedingung 2 hilft mir, die Auswirkungen von align-items zu visualisieren: Es richtet Elemente relativ zueinander aus.

---

Hier ist ein Code-Beispiel. Die Rohmaterialien stammen aus Wes Bos' CSS Grid Tutorial (21. Flexbox vs. CSS Grid)

• Beispiel HTML:

  Short
  Longerrrrrrrrrrrrrr
  
  This is Many Words
  Lorem, ipsum.
  10
  Snickers
  Wes Is Cool
  Short

• Beispiel CSS:

  .flex-container { display: flex; /gibt eine Mindesthöhe vor/ min-height: 60rem; flex-flow: row wrap; border: 5px solid white; justify-content: center; align-items: center; align-content: flex-start; }

  tall {

  /absichtlich groß gemacht/ min-height: 30rem; }

  .item { margin: 10px; max-height: 10rem; }

---

Beispiel 1: Verengen wir den Bildschirm, damit der Inhalt bündig mit dem Container ist. Dies ist der Zeitpunkt, an dem align-content: flex-start; keine Auswirkungen hat, da der gesamte Inhaltsblock eng in den Container passt (kein zusätzlicher Platz für eine Neupositionierung!)

Bemerkenswert ist auch die zweite Reihe - sehen Sie, wie die Elemente untereinander zentriert sind.

Beispiel 2: Wenn wir den Bildschirm vergrößern, haben wir nicht mehr genügend Inhalt, um den gesamten Container zu füllen. Jetzt beginnen wir, die Auswirkungen von align-content: flex-start; zu sehen - es richtet den Inhalt relativ zur oberen Kante des Containers aus.

---

Diese Beispiele basieren auf Flexbox, aber die gleichen Prinzipien sind auch auf CSS Grid anwendbar. Hoffe das hilft :)

Answer 5

Die Wirkung von align-items und align-content erfolgt entlang der Querachse.

Angenommen, flex-direction ist row, dann ist die Hauptachse von links nach rechts und wenn flex-direction column ist, dann ist die Hauptachse von oben nach unten.

Also in den folgenden Beispielen gehen wir davon aus, dass flex-direction row ist, d.h. die Hauptachse von links nach rechts verläuft und die Querachse von oben nach unten.

align-content funktioniert nur, wenn flex-wrap: wrap vorhanden ist und es mehr als eine flex-line im Container gibt.

align-content hat eine höhere Priorität als align-items, wenn es mehrere Flex-Zeilen gibt.

Was ist eine Flex-Zeile?

Jede Zeile oder Spalte von Flex-Elementen in einem Flex-Container ist eine Flex-Zeile. Mehrere Zeilen entstehen, wenn es im Container nicht genügend Platz gibt und Flex-Elemente die nächste Zeile (in flex-direction: row;) einnehmen würden, um unterzubringen. In flex-direction: column fügt es Flex-Elemente in die nächste Zeile ein.

Beispiel

Standardmäßig ist Flex ein flexibler Container, d.h. er kann eine beliebige Anzahl von Elementen aufnehmen, es sei denn, wir haben flex-wrap: wrap angegeben. Ohne wrap werden die Flex-Elemente den Container überlaufen lassen (wenn flex-direction row ist).

Beispiel für align-content

.container{
  border: 5px solid #000;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

.box{
  height:100px;
  font-size: 2rem;
  width: 33.33%;
}

.box1{
  background: purple;
}

.box2{
  background:   #ff8c00;
}

.box3{
  background: lime;
}

.box4{
  background: #008080;
}

.box5{
  background-color: red; 
}

  box 1
  box 2
  box 3
  box 4
  box 5

In obigem Beispiel, wenn flex-wrap: no-wrap gewesen wäre, würde sich align-content nicht auf unser Layout auswirken.

---

Beispiel für align-items

Die align-items-Eigenschaft bestimmt, wie Flex-Elemente innerhalb einer Flex-Zeile entlang der Querachse positioniert werden.

.container{
  border: 5px solid #000;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.box{
  height:100px;
  font-size: 2rem;
  width: 33.33%;
}

.box1{
  background: purple;
}

.box2{
  background:   #ff8c00;
}

.box3{
  background: lime;
}

.box4{
  background: #008080;
}

.box5{
  background-color: red; 
}

  box 1
  box 2
  box 3
  box 4
  box 5

Wenn align-content und align-items auf einem Container mit den Eigenschaften flex-wrap: wrap deklariert sind und es mehr als Flex-Zeilen gibt, hat die Eigenschaft align-content eine höhere Priorität als align-items.

Beispiel für die Priorität von align-content und align-items

.container{
  border: 5px solid #000;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: flex-start;
}

.box{
  height:100px;
  font-size: 2rem;
  width: 33.33%;
}

.box1{
  background: purple;
}

.box2{
  background:   #ff8c00;
}

.box3{
  background: lime;
}

.box4{
  background: #008080;
}

.box5{
  background-color: red; 
}

  box 1
  box 2
  box 3
  box 4
  box 5