Zum Inhalt springen

align-items

  • Redaktion 
  • Zuletzt aktualisiert am

#align-items

Legt fest, wie Flexbox-Elemente innerhalb einer Zeile eines Flexbox-Containers an der Querachse ausgerichtet werden.

align-items: flex-start;

Die Flexbox-Elemente werden am Start der Querachse ausgerichtet.

Standardmäßig ist die Querachse vertikal. Das bedeutet, dass die Flexbox-Elemente vertikal an der Oberkante ausgerichtet werden.

align-items: flex-end;

Die Flexbox-Elemente werden am Ende der Querachse ausgerichtet.

Standardmäßig ist die Querachse vertikal. Das bedeutet, dass die Flexbox-Elemente vertikal an der Unterkante ausgerichtet werden.

align-items: center;

Die Flexbox-Elemente werden an der Mitte der Querachse ausgerichtet.

Standardmäßig ist die Querachse vertikal. Das bedeutet, dass die Flexbox-Elemente zentriert vertikal sind.

align-items: baseline;

Die Flexbox-Elemente werden an der Grundlinie der Querachse ausgerichtet.

Standardmäßig ist die Querachse vertikal. Das bedeutet, dass sich die Flexbox-Elemente so ausrichten, dass die Grundlinie ihres Textes an einer horizontalen Linie ausgerichtet ist.

align-items: stretch;

Die Flexbox-Elemente erstrecken sich über die gesamte Querachse.

Standardmäßig ist die Querachse vertikal. Das bedeutet, dass die Flexbox-Elemente den gesamten vertikalen Raum ausfüllen.