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:
- Der Flex-Container selbst hat eine Höhenbeschränkung (z. B.
min-height: 60rem) und kann daher für seinen Inhalt zu hoch werden
- 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).
<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>
.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 :)
