wake-up-neo.com

Was ist der Unterschied zwischen Align-Content und Align-Items?

Kann mir jemand den Unterschied zwischen align-items und align-content?

csscss3layoutflexboxalignment
258
Dinh

Das align-items Eigenschaft von Flex-Box richtet die Elemente in einem Flex-Container entlang der Querachse aus, genau wie justify-content tut entlang der Hauptachse. (Für die Standardeinstellung flex-direction: row Die Querachse entspricht der Vertikalen und die Hauptachse der Horizontalen. Mit flex-direction: column diese beiden sind jeweils vertauscht).

Hier ist ein Beispiel, wie align-items:center sieht aus:

align-items: center

Aber align-content ist für flexible Boxen mit mehreren Leitungen. Es hat keine Auswirkung, wenn sich Elemente in einer einzelnen Zeile befinden. Es richtet die gesamte Struktur nach ihrem Wert aus. Hier ist ein Beispiel für align-content: space-around;: enter image description here

Und so geht's align-content: space-around; mit align-items:center sieht aus: enter image description here

Beachten Sie, dass das dritte Kästchen und alle anderen Kästchen in der ersten Zeile vertikal zentriert werden.

Hier sind einige Codepen-Links zum Spielen:

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

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

hier ist ein super cooler Stift, mit dem Sie mit fast allem in der Flexbox spielen können.

275
Asim K T

Zuerst, align-items steht für Elemente in einer einzelnen Zeile. Also für eine einzelne Reihe von Elementen auf Hauptachse , align-items richtet diese Elemente aufeinander aus und beginnt mit einer neuen Perspektive aus der nächsten Reihe.

Jetzt, align-content interferiert nicht mit Elementen in einer Zeile, sondern mit den Zeilen selbst . Daher align-content versucht, die Zeilen zueinander auszurichten und den Container zu biegen.

Überprüfen Sie diese Geige: https://jsfiddle.net/htym5zkn/8/

57
Uday Hiwarale

Ich finde das Beispiel http://flexboxfroggy.com/ sehr nützlich.

Es dauert 10-20 Minuten und auf Stufe 21 finden Sie die Antwort auf Ihre Frage. Es wurde erwähnt:

align-content bestimmt den Abstand zwischen den Zeilen, während align-items bestimmt wie die Elemente als Ganzes innerhalb des Containers ausgerichtet sind. Wenn nur eine Zeile vorhanden ist, hat align-content keine Auswirkung

50
Alireza Fattahi

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

align-content Kann die Höhe einer Zeile für die Zeilenrichtung oder die Breite für die Spalte ändern, wenn der Wert stretch ist, oder Leerzeichen zwischen oder um die Zeilen für space-between, space-around, flex-start, flex-end values.

align-items Kann die Höhe oder Position von Elementen innerhalb des Linienbereichs ändern. Wenn Elemente nicht umbrochen werden, haben sie nur eine Linie, deren Bereich immer zum Flex-Box-Bereich gedehnt ist (auch wenn die Elemente überlaufen), und align-content Hat keine Auswirkung auf eine einzelne Linie. Es hat also keine Auswirkung auf nicht umbrochene Elemente und nur align-items Kann die Position von Elementen ändern oder sie dehnen, wenn sich alle in einer einzelnen Zeile befinden.

Wenn sie jedoch umbrochen sind, befinden sich mehrere Zeilen und Elemente in jeder Zeile. Und wenn alle Elemente jeder Zeile dieselbe Höhe haben (für die Zeilenrichtung), entspricht die Höhe dieser Zeile der Höhe dieser Elemente, und Sie sehen keinen Effekt, wenn Sie den Wert align-items Ändern.

Wenn Sie also Elemente durch align-items Beeinflussen möchten, wenn Ihre Elemente umbrochen sind und dieselbe Höhe (für die Zeilenrichtung) haben, müssen Sie zuerst align-content Mit dem Wert stretch verwenden, um den Linienbereich zu erweitern .

10
TheNegative

Ich hatte die gleiche Verwirrung. Nach einigem Basteln basierend auf vielen der obigen Antworten kann ich endlich die Unterschiede erkennen. Meiner bescheidenen Meinung nach lässt sich die Unterscheidung am besten mit einem flexiblen Container demonstrieren, der die folgenden beiden Bedingungen erfüllt:

  1. Der Flex-Container selbst unterliegt einer Höhenbeschränkung (z. B. min-height: 60rem) Und kann daher zu hoch für seinen Inhalt
  2. Die im Container enthaltenen untergeordneten Elemente haben ungleiche Höhen

Bedingung 1 hilft mir zu verstehen, was content relativ zu seinem übergeordneten Container bedeutet. Wenn der Inhalt bündig mit dem Container ist, können wir keine Positionierungseffekte von align-content Sehen. Erst wenn wir entlang der Querachse mehr Platz haben, wird der Effekt sichtbar: Der Inhalt wird relativ zu den Grenzen des übergeordneten Containers ausgerichtet.

Bedingung 2 hilft mir, die Auswirkungen von align-items Zu visualisieren: Elemente werden relativ zueinander ausgerichtet.

Hier ist ein Codebeispiel. Rohstoffe stammen aus Wes Bos 'CSS Grid Tutorial (21. Flexbox vs. CSS Grid)

  • Beispiel 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>
  • Beispiel 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;
}

Beispiel 1 : Verengen wir das Ansichtsfenster so, dass der Inhalt bündig mit dem Container ist. Dies ist der Fall, wenn align-content: flex-start; Keine Auswirkungen hat, da der gesamte Inhaltsblock fest in den Container passt (kein zusätzlicher Platz zum Neupositionieren!).

Beachten Sie auch die 2. Reihe - sehen Sie, wie die Elemente in der Mitte zueinander ausgerichtet sind.

enter image description here

Beispiel 2 : Wenn wir das Ansichtsfenster vergrößern, ist nicht mehr genügend Inhalt vorhanden, um den gesamten Container zu füllen. Jetzt sehen wir die Auswirkungen von align-content: flex-start; - es richtet den Inhalt relativ zum oberen Rand des Containers aus. enter image description here

Diese Beispiele basieren auf Flexbox, aber die gleichen Prinzipien gelten für CSS-Raster. Hoffe das hilft :)

7
Shan Dou

align-content

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

(Denken Sie an Linien eines Absatzes, die vertikal verteilt, oben und unten gestapelt sind. Dies ist unter einem flex-direction Zeilenparadigma).

Align-Items

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

(Denken Sie darüber nach, wie eine einzelne Zeile eines Absatzes ausgerichtet ist, wenn sie normalen Text und etwas größeren Text wie mathematische Gleichungen enthält. In diesem Fall ist dies der untere, obere oder mittlere Teil jeder Textart in einer Zeile, die ausgerichtet wird.) ausgerichtet sein?)

5
ahnbizcad

Der Hauptunterschied ist, wenn die Höhe der Elemente nicht gleich ist! Dann können Sie sehen, wie in der Reihe sie alle Mitte\Ende\Anfang sind

0
simi

nach dem was ich verstanden habe von hier :

wenn Sie "Element ausrichten" oder "Element ausrichten" verwenden, passen Sie den Inhalt eines Rasterelements entlang der Spaltenachse bzw. der Zeilenachse an.

Aber: Wenn Sie Inhalt ausrichten oder Inhalt ausrichten verwenden, legen Sie die Position eines Gitters entlang der Spaltenachse oder der Zeilenachse fest. Dies tritt auf, wenn Sie ein Raster in einem größeren Container haben und Breite oder Höhe unflexibel sind (mit px).

0
Goldenmoon