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 legt den align-self
-Wert für alle direkten Elemente innerhalb eines Containers als Gruppe fest. Im Flexbox-Modell steuert sie die Ausrichtung der Elemente entlang der Querachse. Im Grid-Layout steuert sie die Ausrichtung der Elemente entlang der Blockachse innerhalb ihrer Grid-Bereiche.
Probieren Sie es aus
Das interaktive Beispiel unten demonstriert einige der Werte für align-items
mithilfe von Grid- und Flex-Layouts.
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 angewandten Layoutmodus ab:
- In absolut positionierten Layouts verhält sich dieses Schlüsselwort wie
start
bei ersetzten absolut positionierten Boxen und wiestretch
bei allen anderen absolut positionierten Boxen. - In der statischen Positionierung 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
stretch
, außer bei Boxen mit einem Seitenverhältnis oder einer intrinsischen Größe, wo es sich wiestart
verhält. - Diese Eigenschaft gilt nicht für Boxen auf Blockebene oder für Tabellenzellen.
- In absolut positionierten Layouts verhält sich dieses Schlüsselwort wie
center
-
Die Randbereiche der Flex-Elemente werden entlang der Querachse innerhalb der Linie zentriert. Wenn die Quergröße eines Elements größer als die Flex-Container-Größe ist, wird es gleichmäßig in beide Richtungen überlaufen.
start
-
Die Elemente werden eng gepackt in Richtung der Startkante des Ausrichtungscontainers entlang der entsprechenden Achse.
end
-
Die Elemente werden eng gepackt in Richtung der Endkante des Ausrichtungscontainers entlang der entsprechenden Achse.
self-start
-
Die Elemente werden nah an die Startseite des Containers in der entsprechenden Achse gepackt.
self-end
-
Die Elemente werden nah an die Endseite des Containers in der entsprechenden Achse gepackt.
baseline
,first baseline
,last baseline
-
Alle Flex-Elemente werden so ausgerichtet, dass ihre Baseline des Flex-Containers übereinstimmen. Das Element mit dem größten Abstand zwischen seiner Quer-Start-Margin-Kante und seiner Baseline wird mit der Quer-Start-Kante der Linie ausgerichtet.
stretch
-
Wenn die Elemente kleiner als der Ausrichtungscontainer sind, werden auto-größenangegebene Elemente gleichmäßig vergrößert, um den Container zu füllen, wobei die Breiten- und Höhenbeschränkungen der Elemente berücksichtigt werden.
anchor-center
-
Bei verankerten Elementen werden die Elemente zentriert in Bezug auf das zugehörige Ankerelement in der Blockrichtung ausgerichtet. Siehe Zentrieren am Anker mit
anchor-center
. safe
-
Wird zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Falls das gewählte Schlüsselwort bedeutet, dass das Element den Ausrichtungscontainer überschreitet, was zu Datenverlust führt, wird das Element stattdessen so ausgerichtet, als wäre der Ausrichtungsmodus
start
. unsafe
-
Wird zusammen mit einem Ausrichtungs-Schlüsselwort verwendet. Unabhängig von der relativen Größe des Elements und des Ausrichtungscontainers und ob ein Überlauf zu Datenverlust führen könnte, wird der angegebene Ausrichtungswert beachtet.
Es gibt auch zwei Werte, die für Flexbox definiert wurden, da sie auf Konzepten der Flexmodellachsen basieren und auch in Grid-Layouts funktionieren:
flex-start
-
Wird nur im Flex-Layout verwendet, richtet die Flex-Elemente an der Haupt-Start- oder Quer-Start-Seite des Containers aus. Außerhalb eines Flex-Layouts verhält sich dieser Wert wie
start
. flex-end
-
Wird nur im Flex-Layout verwendet, richtet die Flex-Elemente an der Haupt-End- oder Quer-End-Seite des Containers aus. Außerhalb eines Flex-Layouts 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 stylen den Container und die Elemente so, dass wir zwei Zeilen oder Reihen von Elementen haben. Wir definieren .flex
- und .grid
-Klassen, welche dem Container mit JavaScript zugewiesen werden. Sie setzen den display
-Wert des Containers und ändern dessen Hintergrund- und Rahmenfarben, um einen zusätzlichen Hinweis darauf zu liefern, dass das Layout geändert wurde. Die sechs Flex-Elemente haben jeweils unterschiedliche Hintergrundfarben, wobei das vierte Element zwei Zeilen lang ist und das sechste 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 <div>
-Container mit sechs verschachtelten <div>
-Kind-Elementen ein. Der HTML-Code für das Formular und das JavaScript, das die Klasse des Containers ändert, wurde aus Gründen der Kürze 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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
align-items | ||||||||||||
anchor-center | ||||||||||||
Supported in Flex Layout | ||||||||||||
flex_context.baseline | ||||||||||||
first baseline | ||||||||||||
last baseline | ||||||||||||
safe and unsafe | ||||||||||||
start and end | ||||||||||||
Supported in Grid Layout | ||||||||||||
start and end |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.