align-items
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
* Some parts of this feature may have varying levels of support.
Die CSS align-items
-Eigenschaft setzt den Wert von align-self
für alle direkten Kinder als Gruppe. In Flexbox steuert sie die Ausrichtung von Elementen auf der cross axis. Im Grid Layout steuert sie die Ausrichtung der Elemente auf der Blockachse innerhalb ihrer grid areas.
Probieren Sie es aus
align-items: stretch;
align-items: center;
align-items: start;
align-items: end;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
display: grid;
width: 200px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 80px;
grid-gap: 10px;
}
#example-element > div {
background-color: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
}
Das folgende interaktive Beispiel zeigt einige der Werte für align-items
in der Verwendung mit 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 Layoutmodus ab, in dem wir uns befinden:
- 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. - Im statischen Zustand von absolut positionierten Layouts verhält sich das Schlüsselwort wie
stretch
. - Für Flex-Elemente verhält sich das Schlüsselwort wie
stretch
. - Für Grid-Elemente führt dieses Schlüsselwort zu einem Verhalten ähnlich dem von
stretch
, außer in Boxen mit einem aspect ratio oder einer intrinsischen Größe, wo es sich wiestart
verhält. - Die Eigenschaft gilt nicht für Block-Level-Boxen und Tabellenzellen.
- In absolut positionierten Layouts verhält sich das Schlüsselwort wie
center
-
Die Margin-Boxen der Flex-Elemente werden innerhalb der Linie auf der Querachse zentriert. Wenn die Querausdehnung eines Elements größer als der Flex-Container ist, überfließt es gleichmäßig in beide Richtungen.
start
-
Die Elemente sind bündig zueinander zum Start-Rand des Ausrichtungscontainers in der entsprechenden Achse gepackt.
end
-
Die Elemente sind bündig zueinander zum End-Rand des Ausrichtungscontainers in der entsprechenden Achse gepackt.
self-start
-
Die Elemente sind bündig zum Startseite des Ausrichtungscontainers des Elements in der entsprechenden Achse gepackt.
self-end
-
Die Elemente sind bündig zur Endseite des Ausrichtungscontainers des Elements in der entsprechenden Achse gepackt.
baseline
,first baseline
,last baseline
-
Alle Flex-Elemente sind so ausgerichtet, dass ihre flex container baselines übereinstimmen. Das Element mit der größten Entfernung zwischen seinem Cross-Start-Margin-Rand und seiner Baseline wird mit dem Cross-Start-Rand der Linie bündig gemacht.
stretch
-
Wenn die Elemente kleiner als der Ausrichtungscontainer sind, werden automatisch dimensionierte Elemente gleichmäßig vergrößert, um den Container auszufüllen, wobei die Breiten- und Höhenbeschränkungen der Elemente respektiert werden.
anchor-center
-
Im Fall von anchor-positioned Elementen richtet das die Elemente in der Blockrichtung zur Mitte des zugehörigen Ankerelements aus. Siehe Centering on the anchor using
anchor-center
. safe
-
Verwendet zusammen mit einem Ausrichtungsschlüsselwort. Wenn das gewählte Schlüsselwort bedeutet, dass das Element den Ausrichtungscontainer überflutet und Datenverlust verursacht, wird das Element stattdessen so ausgerichtet, als wäre der Ausrichtungsmodus
start
. unsafe
-
Verwendet zusammen mit einem Ausrichtungsschlüsselwort. Ungeachtet der relativen Größen des Elements und des Ausrichtungscontainers und ob ein Überlaufen, das zu Datenverlust führen könnte, passieren könnte, wird der gegebene Ausrichtungswert berücksichtigt.
Es gibt auch zwei Werte, die für Flexbox definiert sind, basierend auf Konzepten von flex model axes, die auch in Grid-Layouts funktionieren:
flex-start
-
Nur im Flex-Layout verwendet, richtet die Flex-Elemente bündig gegen die Haupt-Start- oder Cross-Start-Seite des Flex-Containers aus. Wenn es außerhalb eines Flex-Formatierungskontexts verwendet wird, verhält sich dieser Wert wie
start
. flex-end
-
Nur im Flex-Layout verwendet, richtet die Flex-Elemente bündig gegen die Haupt-End- oder Cross-End-Seite des Flex-Containers aus. Wenn es außerhalb eines Flex-Formatierungskontexts verwendet wird, verhält sich dieser Wert wie
end
.
Formale Definition
Anfangswert | 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 haben. Wir haben .flex
und .grid
Klassen definiert, die dem Container mit JavaScript zugewiesen werden. Sie setzen den display
-Wert des Containers und ändern seine Hintergrund- und Rahmenfarben, die einen zusätzlichen Hinweis darauf geben, 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 hinzu. Das HTML für das Formular und das JavaScript, das die Klasse des Containers ändert, wurde der Kürze 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 |