align-items

Übersicht

Die align-items CSS Eigenschaft richtet Flexelemente der aktuellen Flexlinie genauso wie justify-content aus, jedoch in senkrechter Richtung.

Initialwertnormal
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Siehe die Verwendung von CSS Flexible Boxes fĂŒr weitere Eigenschaften und Informationen.

Syntax

/* Am Kreuzungsstart ausrichten */
align-items: flex-start;

/* Am Kreuzungsende ausrichten */
align-items: flex-end;

/* Elemente um die Kreuzungsachse zentrieren */
align-items: center;

/* Basislinien der Elemente ausrichten */
align-items: baseline;

/* Elemente dehnen, um sie einzupassen */
align-items: stretch;

/* Globale Werte */
align-items: inherit;
align-items: initial;
align-items: unset;

Werte

flex-start
Der Rand der Querachse des Flexelements grenzt an den Startrand der Querachse der Zeile.
flex-end
Der Rand der Querachse des Flexelements grenzt an den Endrand der Querachse der Zeile.
center
Die Außenabstandsbox des Flexelements wird innerhalb der Zeile auf der Querachse zentriert. Falls die vertikale GrĂ¶ĂŸe des Elements grĂ¶ĂŸer ist als der Flexcontainer, ĂŒberragt es die RĂ€nder gleichmĂ€ĂŸig in beiden Richtungen.
baseline
Alle Flexelemente werden an deren Grundlinien ausgerichtet. Das Element mit dem grĂ¶ĂŸten Abstand zwischen seinem Startrand der Querachse und der Grundlinie grenzt an den Startrand der Zeile.
stretch
Flexelemente werden gedehnt, sodass die horizontale GrĂ¶ĂŸe der Außenabstandsbox des Elements mit der Zeile ĂŒbereinstimmt, wobei Breiten- und Höhenbegrenzungen berĂŒcksichtigt werden.

Formale Syntax

normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]

wobei
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

Beispiele

FIXME:

Spezifikationen

Spezifikation Status Kommentar
CSS Flexible Box Layout Module
Die Definition von 'align-items' in dieser Spezifikation.
AnwĂ€rter Empfehlung UrsprĂŒngliche Definition

Browser KompatibilitÀt

Support im Flex-Layout

BCD tables only load in the browser

Support im Grid-Layout

BCD tables only load in the browser

[1] Firefox unterstĂŒtzt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox UnterstĂŒtzung fĂŒr Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

[2] In Internet Explorer 10-11 (aber nicht 12+), falls Spaltenflexelemente align-items: center; gesetzt haben und ihr Inhalt zu groß ist, ĂŒberfließen sie die Grenzen ihres Containers. Siehe Flexbug #2 fĂŒr mehr Informationen.

Siehe auch