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

Kann mir jemand den Unterschied zwischen align-itemsund zeigen align-content?

Die align-itemsEigenschaft von Flex-Box richtet die Elemente in einem Flex-Container entlang der Querachse aus, genau wie justify-contententlang der Hauptachse. (Standardmäßig entspricht flex-direction: rowdie Querachse der Vertikalen und die Hauptachse der Horizontalen. Mit flex-direction: columndiesen beiden werden jeweils vertauscht).

Hier ist ein Beispiel dafür, wie es align-items:centeraussieht:

Ist align-contentaber für mehrzeilige flexible Boxen. 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;:

Und hier ist , wie align-content: space-around;mit align-items:centerAussehen:

Beachten Sie, dass das dritte Feld und alle anderen Felder in der ersten Zeile vertikal in dieser Zeile zentriert sind.

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 fast alles in der Flexbox spielen können.

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 erwähnte:

Ausrichtungsinhalt bestimmt den Abstand zwischen Zeilen, während Ausrichtungselemente bestimmen, wie die Elemente als Ganzes innerhalb des Containers ausgerichtet werden. Wenn nur eine Zeile vorhanden ist, hat der Ausrichtungsinhalt keine Auswirkung

Erstens align-itemsist für Elemente in einer einzelnen Zeile. Also für eine einzelne Reihe von Elementen auf Hauptachse , align-itemswird diese Elemente jeweils voneinander ausrichten und es wird mit frischer Perspektive aus der nächsten Reihe starten.

align-contentBeeinträchtigt jetzt nicht Elemente in einer Zeile, sondern die Zeilen selbst . Daher align-contentwird versucht, die Zeilen in Bezug zueinander auszurichten und den Container zu biegen.

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

Ich hatte die gleiche Verwirrung. Nach einigem Basteln anhand vieler der obigen Antworten kann ich endlich die Unterschiede erkennen. Meiner bescheidenen Meinung nach lässt sich die Unterscheidung am besten mit einem Flex-Container demonstrieren, der die folgenden zwei Bedingungen erfüllt:

1. Der Flex-Container selbst hat eine Höhenbeschränkung (z. B. min-height: 60rem) und kann daher für seinen Inhalt zu hoch werden
2. Die im Behälter enthaltenen untergeordneten Gegenstände haben ungleichmäßige Höhen

Bedingung 1 hilft mir zu verstehen, was contentrelativ zu seinem übergeordneten Container bedeutet. Wenn der Inhalt bündig mit dem Container ist, können wir keine Positionierungseffekte erkennen align-content. Erst wenn wir zusätzlichen Platz entlang der Querachse haben, sehen wir die Wirkung: Der Inhalt wird relativ zu den Grenzen des übergeordneten Containers ausgerichtet.

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

Hier ist ein Codebeispiel. Die Rohstoffe stammen aus dem CSS-Grid-Tutorial von Wes Bos (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 : Lassen Sie uns das Ansichtsfenster so eingrenzen, dass der Inhalt mit dem Container bündig ist. Dies align-content: flex-start;hat keine Auswirkungen, da der gesamte Inhaltsblock fest im Behälter sitzt (kein zusätzlicher Raum für die Neupositionierung!).

Beachten Sie auch die 2. Reihe - sehen Sie, wie die Elemente mittig zueinander ausgerichtet sind.

Beispiel 2 : Wenn wir das Ansichtsfenster erweitern, haben wir nicht mehr genügend Inhalt, um den gesamten Container zu füllen. Jetzt sehen wir die Auswirkungen von align-content: flex-start;--it richtet den Inhalt relativ zur Oberkante des Containers aus.

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

Nun, ich habe sie in meinem Browser untersucht.

align-contentkann eine Höhe für die Spalte für Zeilenrichtung oder Breite der Linie ändern , wenn es den Wert Stretch, oder fügen dem leeren Raum zwischen den oder um die Linien für die ist space-between, space-around, flex-start, flex-end values.

align-itemskann die Höhe oder Position von Elementen innerhalb des Linienbereichs ändern. Wenn Elemente nicht verpackt werden, haben sie nur eine Linie, deren Fläche immer auf den Flex-Box-Bereich ausgedehnt wird (auch wenn die Elemente überlaufen) und align-contentkeine Auswirkung auf eine einzelne Linie hat. Es hat also keine Auswirkung auf Elemente, die nicht verpackt sind, und align-itemskann die Position von Elementen nur ändern oder dehnen, wenn sich alle in einer einzelnen Zeile befinden.

Wenn sie jedoch verpackt sind, befinden sich in jeder Zeile mehrere Zeilen und Elemente. 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 align-itemsWert ändern .

Wenn Sie also Elemente beeinflussen möchten, bis align-itemsIhre Elemente verpackt sind und dieselbe Höhe (für die Zeilenrichtung) haben, müssen Sie zuerst den align-contentDehnungswert verwenden, um den Linienbereich zu erweitern.

Inhalt ausrichten

align-contentsteuert die Querachsenposition (dh die vertikale Richtung, wenn dies der Fall flex-directionist row, und die horizontale Position , wenn dies der Fall flex-directionist column) der Positionierung mehrerer Linien relativ zueinander.

(Stellen Sie sich die Zeilen eines Absatzes vor, der vertikal verteilt, nach oben und nach unten gestapelt ist. Dies steht unter einem flex-directionZeilenparadigma.)

Elemente ausrichten

align-items steuert die Querachse einer einzelnen Linie von Flexelementen.

(Überlegen Sie, wie eine einzelne Zeile eines Absatzes ausgerichtet ist, wenn sie normalen Text und einen höheren Text wie mathematische Gleichungen enthält. In diesem Fall ist dies der untere, obere oder mittlere Punkt jedes Texttyps in einer Zeile ausgerichtet sein?)

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

Was ist die Querachse und Hauptachse

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

Jetzt Inhalte ausrichten und Elemente ausrichten

Align-Content ist für die Zeile. Es funktioniert, wenn der Container (mehr als eine Zeile) Eigenschaften von Align-Content hat

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

Ausrichten von Elementen gilt für die Elemente in der Zeile Eigenschaften von Ausrichten von Elementen

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

Weitere Informationen finden Sie unter flex

Der Hauptunterschied besteht darin, dass die Höhe der Elemente nicht gleich ist! Dann können Sie sehen, wie in der Zeile alle Center \ End \ Start sind

nach dem, was ich von hier verstanden habe :

Wenn Sie Ausrichtungselement oder Ausrichtungselement verwenden, passen Sie den Inhalt innerhalb eines Rasterelements entlang der Spaltenachse bzw. Zeilenachse an.

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