align-items
Die CSS align-items
Eigenschaft setzt den Wert von align-self
auf alle direkten Kinder als Gruppe. In Flexbox steuert sie die Ausrichtung von Elementen auf der Querachse. Im Grid-Layout steuert sie die Ausrichtung von Elementen auf der Blockachse innerhalb ihrer Grid-Bereiche.
Probieren Sie es aus
Das interaktive Beispiel unten demonstriert einige der Werte für align-items
unter Nutzung von Grid- und Flex-Layout.
Syntax
/* Basic keywords */
align-items: normal;
align-items: stretch;
/* Positional alignment */
/* align-items does not take left and right values */
align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;
align-items: anchor-center;
/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;
/* Global values */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;
Werte
normal
-
Die Wirkung dieses Schlüsselworts hängt vom verwendeten Layout-Modus ab:
- In absolut positionierten Layouts verhält sich das Schlüsselwort wie
start
bei ersetzten absolut positionierten Boxen und wiestretch
bei allen anderen absolut positionierten Boxen. - In der statischen Position von absolut positionierten Layouts verhält sich das Schlüsselwort wie
stretch
. - Bei Flex-Elementen verhält sich das Schlüsselwort wie
stretch
. - Bei Grid-Elementen führt dieses Schlüsselwort zu einem Verhalten ähnlich dem von
stretch
, außer bei Boxen mit einem Seitenverhältnis oder intrinsischen Größen, wo es sich wiestart
verhält. - Diese Eigenschaft gilt nicht für Block-Level-Boxen und für Tabellenzellen.
- In absolut positionierten Layouts verhält sich das Schlüsselwort wie
center
-
Die Margin-Boxen der Flex-Elemente sind innerhalb der Zeile auf der Querachse zentriert. Wenn die Quergröße eines Elements größer als der Flex-Container ist, läuft es zu beiden Richtungen gleichmäßig über.
start
-
Die Elemente sind bündig zueinander gepackt in Richtung der Startkante des Ausrichtungscontainers auf der entsprechenden Achse.
end
-
Die Elemente sind bündig zueinander gepackt in Richtung der Endkante des Ausrichtungscontainers auf der entsprechenden Achse.
self-start
-
Die Elemente sind bündig zur Kante der Startseite des Ausrichtungscontainers des Elements gepackt, auf der entsprechenden Achse.
self-end
-
Die Elemente sind bündig zur Kante der Endseite des Ausrichtungscontainers des Elements gepackt, auf der entsprechenden Achse.
baseline
,first baseline
,last baseline
-
Alle Flex-Elemente sind so ausgerichtet, dass ihre Flex-Container-Basislinien ausgerichtet sind. Das Element mit dem größten Abstand zwischen seiner Querstart-Margin-Kante und seiner Basislinie wird mit der Querstartkante der Linie bündig gemacht.
stretch
-
Wenn die Elemente kleiner als der Ausrichtungscontainer sind, werden automatisch skalierte Elemente gleichmäßig vergrößert, um den Container zu füllen, unter Berücksichtigung der Breiten- und Höhenlimits der Elemente.
anchor-center
-
Im Fall von ankerpositionierten Elementen richtet es die Elemente am Zentrum des zugehörigen Ankerelements in Blockrichtung aus. Siehe Zentrieren am Anker mit
anchor-center
. safe
-
Wird zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Wenn das gewählte Schlüsselwort bedeutet, dass das Element den Ausrichtungscontainer überläuft und Datenverlust verursacht, wird das Element stattdessen so ausgerichtet, als wäre der Ausrichtungsmodus
start
. unsafe
-
Wird zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Unabhängig von den relativen Größen des Elements und des Ausrichtungscontainers und ob ein Überlauf, der Datenverlust verursachen könnte, auftritt, wird der gegebene Ausrichtungswert eingehalten.
Es gibt auch zwei Werte, die für Flexbox definiert wurden, da sie auf den Konzepten der Flexmodell-Achsen basieren und auch in Grid-Layouts funktionieren:
flex-start
-
Wird nur im Flex-Layout verwendet, richtet die Flex-Elemente bündig gegen die Hauptstart- oder Querstartseite des Flex-Containers aus. Wenn außerhalb eines Flex-Formatierungs-Kontexts verwendet, verhält sich dieser Wert wie
start
. flex-end
-
Wird nur im Flex-Layout verwendet, richtet die Flex-Elemente bündig gegen die Hauptend- oder Querendseite des Flex-Containers aus. Wenn außerhalb eines Flex-Formatierungs-Kontexts verwendet, verhält sich dieser Wert wie
end
.
Formale Definition
Initialer Wert | normal |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
CSS
Wir gestalten den Container und die Elemente so, dass wir zwei Linien oder Reihen von Elementen erhalten. Wir haben .flex
und .grid
Klassen definiert, die mit JavaScript auf den Container angewendet werden. Sie setzen den display
Wert des Containers und ändern seine Hintergrund- und Rahmenfarben, um einen zusätzlichen Indikator dafür zu bieten, dass sich das Layout geändert hat. Die sechs Flex-Elemente haben jeweils eine andere Hintergrundfarbe, wobei das 4. Element zwei Zeilen lang ist und das 6. Element eine vergrößerte Schriftart hat.
.flex,
.grid {
height: 200px;
width: 500px;
align-items: initial; /* Change the value in the live sample */
border: solid 5px transparent;
gap: 3px;
}
.flex {
display: flex;
flex-wrap: wrap;
background-color: #8c8c9f;
border-color: magenta;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
background-color: #9f8c8c;
border-color: slateblue;
}
#item1 {
background-color: #8cffa0;
min-height: 30px;
}
#item2 {
background-color: #a0c8ff;
min-height: 50px;
}
#item3 {
background-color: #ffa08c;
min-height: 40px;
}
#item4 {
background-color: #ffff8c;
min-height: 60px;
}
#item5 {
background-color: #ff8cff;
min-height: 70px;
}
#item6 {
background-color: #8cffff;
min-height: 50px;
font-size: 30px;
}
HTML
Wir fügen einen Container <div>
mit sechs verschachtelten <div>
Kindern ein. Der HTML-Code für das Formular und das JavaScript, das die Klasse des Containers ändert, wurde der Übersichtlichkeit halber weggelassen.
<div id="container" class="flex">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4<br />line 2</div>
<div id="item5">5</div>
<div id="item6">6</div>
</div>
Ergebnis
Spezifikationen
Specification |
---|
CSS Box Alignment Module Level 3 # align-items-property |
CSS Flexible Box Layout Module Level 1 # align-items-property |
Browser-Kompatibilität
BCD tables only load in the browser