Summary  
This chapter covers the CSS align-items property for vertically aligning flex items along the cross axis in a flex container, using values like stretch, center, flex-start, flex-end, and baseline.

General domain of usage  
Web UI layout

Die Eigenschaft `align-items` steuert die vertikale Anordnung der Flex-Elemente. Der Standardwert ist `stretch`.
```css
align-items: stretch | center | flex-start | flex-end | baseline;
```

Im Folgenden werden Beispiele ausgeführt, um den Anwendungsbereich zu verdeutlichen.

## stretch
Bedeutet, dass die Elemente über die gesamte Länge der Querachse gestreckt werden.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bCBjbGFzcz0iY2FyZHMtbGlzdCI+CiAgICAgIDxsaSBjbGFzcz0iY2FyZCI+CiAgICAgICAgPGltZwogICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvam9rZXIucG5nIgogICAgICAgICAgYWx0PSJKb2tlciIKICAgICAgICAgIHdpZHRoPSI2NHB4IgogICAgICAgIC8+CiAgICAgICAgPHA+TG9yZW0sIGlwc3VtIGRvbG9yLjwvcD4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJjYXJkIj4KICAgICAgICA8aW1nCiAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9hbGllbi5wbmciCiAgICAgICAgICBhbHQ9IkFsaWVuIgogICAgICAgICAgd2lkdGg9IjY0cHgiCiAgICAgICAgLz4KICAgICAgICA8cD4KICAgICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEV4cGVkaXRhIHF1b3MKICAgICAgICAgIHZvbHVwdGF0ZSB2ZWxpdCBhc3BlcmlvcmVzIGRvbG9yZXMgZGVsZW5pdGkgZGViaXRpcyBhdXRlbSBhbGlxdWlkIHF1aWEKICAgICAgICAgIGRlbGVjdHVzLgogICAgICAgIDwvcD4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJjYXJkIj4KICAgICAgICA8aW1nCiAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9jbG93bi5wbmciCiAgICAgICAgICBhbHQ9IkNsb3duIgogICAgICAgICAgd2lkdGg9IjY0cHgiCiAgICAgICAgLz4KICAgICAgICA8cD5Mb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldC48L3A+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0iY2FyZCI+CiAgICAgICAgPGltZwogICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvdG95LW1vdXNlLnBuZyIKICAgICAgICAgIGFsdD0iVG95IG1vdXNlIgogICAgICAgICAgd2lkdGg9IjY0cHgiCiAgICAgICAgLz4KICAgICAgICA8cD4KICAgICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCwgYW1ldCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBTZXF1aSwKICAgICAgICAgIHJhdGlvbmUuCiAgICAgICAgPC9wPgogICAgICA8L2xpPgogICAgICA8bGkgY2xhc3M9ImNhcmQiPgogICAgICAgIDxpbWcKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2dob3N0LnBuZyIKICAgICAgICAgIGFsdD0iR2hvc3QiCiAgICAgICAgICB3aWR0aD0iNjRweCIKICAgICAgICAvPgogICAgICAgIDxwPgogICAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gVml0YWUsCiAgICAgICAgICBhZGlwaXNjaSBub2JpcyBjdWxwYSBjb3Jwb3JpcyBuYW0gZGljdGEgdG90YW0gYXJjaGl0ZWN0byBkaWduaXNzaW1vcwogICAgICAgICAgaGljLCByZXByZWhlbmRlcml0LCBjb25zZXF1YXR1ciBwYXJpYXR1ciEKICAgICAgICA8L3A+CiAgICAgIDwvbGk+CiAgICA8L3VsPgogIDwvYm9keT4KPC9odG1sPg==

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYm9yZGVyOiAxcHggc29saWQga2hha2k7CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIG5hdnk7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogMTIwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## center
Elemente befinden sich in der Mitte der Querachse.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBib3JkZXI6IDFweCBzb2xpZCBraGFraTsKICB3aWR0aDogNjYwcHg7Cn0KCi5jYXJkIHsKICBib3JkZXI6IDFweCBkYXNoZWQgbmF2eTsKICBwYWRkaW5nOiAxMHB4OwogIHdpZHRoOiAxMjBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## flex-start
Alle Elemente beginnen am Anfang der Querachse.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7CiAgYm9yZGVyOiAxcHggc29saWQga2hha2k7CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIG5hdnk7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogMTIwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## flex-end
Alle Elemente befinden sich am Ende der Querachse (am Ende des übergeordneten Flex-Containers).

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGZsZXgtZW5kOwogIGJvcmRlcjogMXB4IHNvbGlkIGtoYWtpOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBuYXZ5OwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDEyMHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9ucyAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## baseline
Alle Flex-Elemente werden anhand ihrer Textgrundlinie ausgerichtet.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bCBjbGFzcz0iY2FyZHMtbGlzdCI+CiAgICAgIDxsaSBjbGFzcz0iY2FyZCI+CiAgICAgICAgPGltZwogICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvam9rZXIucG5nIgogICAgICAgICAgYWx0PSJKb2tlciIKICAgICAgICAgIHdpZHRoPSIzMnB4IgogICAgICAgIC8+CiAgICAgICAgPHA+TG9yZW0sIGlwc3VtIGRvbG9yLjwvcD4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJjYXJkIj4KICAgICAgICA8aW1nCiAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9hbGllbi5wbmciCiAgICAgICAgICBhbHQ9IkFsaWVuIgogICAgICAgICAgd2lkdGg9IjE2cHgiCiAgICAgICAgLz4KICAgICAgICA8cD4KICAgICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEV4cGVkaXRhIHF1b3MKICAgICAgICAgIHZvbHVwdGF0ZSB2ZWxpdCBhc3BlcmlvcmVzIGRvbG9yZXMgZGVsZW5pdGkgZGViaXRpcyBhdXRlbSBhbGlxdWlkIHF1aWEKICAgICAgICAgIGRlbGVjdHVzLgogICAgICAgIDwvcD4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJjYXJkIj4KICAgICAgICA8aW1nCiAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9jbG93bi5wbmciCiAgICAgICAgICBhbHQ9IkNsb3duIgogICAgICAgICAgd2lkdGg9IjY0cHgiCiAgICAgICAgLz4KICAgICAgICA8cD5Mb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldC48L3A+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0iY2FyZCI+CiAgICAgICAgPHA+CiAgICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQsIGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gU2VxdWksCiAgICAgICAgICByYXRpb25lLgogICAgICAgIDwvcD4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJjYXJkIj4KICAgICAgICA8aW1nCiAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9naG9zdC5wbmciCiAgICAgICAgICBhbHQ9Ikdob3N0IgogICAgICAgICAgd2lkdGg9IjY0cHgiCiAgICAgICAgLz4KICAgICAgICA8cD4KICAgICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFZpdGFlLAogICAgICAgICAgYWRpcGlzY2kgbm9iaXMgY3VscGEgY29ycG9yaXMgbmFtIGRpY3RhIHRvdGFtIGFyY2hpdGVjdG8gZGlnbmlzc2ltb3MKICAgICAgICAgIGhpYywgcmVwcmVoZW5kZXJpdCwgY29uc2VxdWF0dXIgcGFyaWF0dXIhCiAgICAgICAgPC9wPgogICAgICA8L2xpPgogICAgPC91bD4KICA8L2JvZHk+CjwvaHRtbD4=

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGJhc2VsaW5lOwogIGJvcmRlcjogMXB4IHNvbGlkIGtoYWtpOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBuYXZ5OwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDEyMHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9ucyAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

Was bewirkt die Eigenschaft `align-items`?

Welche der folgenden Werte können mit der Eigenschaft `align-items` verwendet werden?

Beherrschen Sie die Grundlagen von CSS (Cascading Style Sheets), der Gestaltungssprache, die das Erscheinungsbild von Webseiten verändert. Erforschen Sie zentrale Konzepte wie Textstile, Farben, Abstände, das Box-Modell, Flexbox und dekorative Effekte. Entwickeln Sie Fähigkeiten zur Erstellung ansprechender und gut strukturierter Webseiten. Ideal für Einsteiger, die eine solide Grundlage in CSS aufbauen möchten.

Erfahren Sie, was CSS ist, wie es mit HTML verbunden wird und wie HTML-Elemente mithilfe von Selektoren gestaltet werden. Entdecken Sie grundlegende Konzepte wie Textfarben, Pseudoklassen für Benutzeraktionen und Variablen in CSS.

Erfahren Sie, wie Sie Text auf Ihren Webseiten gestalten und formatieren. Lernen Sie, benutzerdefinierte Schriftarten anzuwenden und verschiedene Schriftarteigenschaften zu erkunden, um das Erscheinungsbild von Text zu verbessern.

Erlernen der Grundlagen des Box-Modells, das das Layout und die Abstände von Elementen auf einer Webseite definiert. Untersuchung von Konzepten wie Box-Sizing, Hinzufügen von Abstand zu Elementen, Arbeiten mit Block- und Inline-Elementen sowie Nutzung struktureller und funktionaler Pseudoklassen für fortgeschrittenes Styling.

Entdecken Sie Flexbox, eine leistungsstarke CSS-Layoutmethode zur Anordnung von Elementen in Zeilen und Spalten. Erfahren Sie, wie Sie Richtung, Ausrichtung und Abstand von Elementen horizontal und vertikal steuern sowie einzelne Flex-Elemente für präzise Layouts anpassen können.

Erfahren Sie, wie Sie mit CSS die visuelle Attraktivität Ihrer Webseiten steigern. Entdecken Sie Techniken zur Anwendung von Hintergrundfarben und -bildern, zum Stylen von Bildern, zur Nutzung dekorativer Pseudoelemente und zum Hinzufügen von Schatten für beeindruckende Designs.

Vertikales Ausrichten von Elementen in Flexbox

stretch

center

flex-start

flex-end

baseline

1. Was bewirkt die Eigenschaft `align-items`?

2. Welche der folgenden Werte können mit der Eigenschaft `align-items` verwendet werden?

Awesome!

Vertikales Ausrichten von Elementen in Flexbox

stretch

center

flex-start

flex-end

baseline

1. Was bewirkt die Eigenschaft `align-items`?

2. Welche der folgenden Werte können mit der Eigenschaft `align-items` verwendet werden?

Vertikales Ausrichten von Elementen in Flexbox

stretch

center

flex-start

flex-end

baseline

1. Was bewirkt die Eigenschaft align-items?

2. Welche der folgenden Werte können mit der Eigenschaft align-items verwendet werden?

Awesome!

Vertikales Ausrichten von Elementen in Flexbox

stretch

center

flex-start

flex-end

baseline

1. Was bewirkt die Eigenschaft align-items?

2. Welche der folgenden Werte können mit der Eigenschaft align-items verwendet werden?

1. Was bewirkt die Eigenschaft `align-items`?

2. Welche der folgenden Werte können mit der Eigenschaft `align-items` verwendet werden?

1. Was bewirkt die Eigenschaft `align-items`?

2. Welche der folgenden Werte können mit der Eigenschaft `align-items` verwendet werden?