Summary  
This chapter explains how to use the CSS align-items property to control the vertical arrangement of items within a flex container using options like stretch, center, flex-start, flex-end, and baseline.

General domain of usage  
Web page layout

Egenskaben `align-items` styrer den lodrette placering af flex-elementer. Standardværdien er `stretch`.
```css
align-items: stretch | center | flex-start | flex-end | baseline;
```

Følgende eksempler illustrerer, hvornår denne egenskab er nødvendig.

## stretch
Dette betyder, at elementerne udvides til hele længden af tværaksen.

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

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYm9yZGVyOiAxcHggc29saWQga2hha2k7CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIG5hdnk7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogMTIwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## center
Elementer er placeret i midten af tværaksen.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBib3JkZXI6IDFweCBzb2xpZCBraGFraTsKICB3aWR0aDogNjYwcHg7Cn0KCi5jYXJkIHsKICBib3JkZXI6IDFweCBkYXNoZWQgbmF2eTsKICBwYWRkaW5nOiAxMHB4OwogIHdpZHRoOiAxMjBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## flex-start
Alle elementer starter ved begyndelsen af tværaksen.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7CiAgYm9yZGVyOiAxcHggc29saWQga2hha2k7CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIG5hdnk7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogMTIwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## flex-end
Alle elementer er placeret i slutningen af tværaksen (i slutningen af den overordnede flex-container).

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGZsZXgtZW5kOwogIGJvcmRlcjogMXB4IHNvbGlkIGtoYWtpOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBuYXZ5OwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDEyMHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9ucyAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## baseline
Alle flex-elementer justeres ud fra deres tekstindholds baseline.

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

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGJhc2VsaW5lOwogIGJvcmRlcjogMXB4IHNvbGlkIGtoYWtpOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBuYXZ5OwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDEyMHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9ucyAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

Hvilke af følgende værdier kan bruges med egenskaben `align-items`?

Behersk det grundlæggende i CSS, sproget til styling, der forvandler udseendet og oplevelsen af websider. Udforsk kernekoncepter såsom tekststilarter, farver, afstand, box-modellen, Flexbox og dekorative effekter. Opbyg færdigheder til at skabe visuelt engagerende og velstrukturerede websider.

Forstå, hvordan CSS forbindes til HTML, og hvordan stilarter anvendes gennem selektorer.
Anvendelse af farver, tekstformatering og hover-effekter til at kontrollere visuel præsentation.

Forbedring af typografi ved hjælp af linjehøjde, afstand, skrifttypeegenskaber og brugerdefinerede skrifttyper. Kontrol af skrifttypefamilier, vægt, stil og størrelse for øget læsbarhed.

Styring af layoutstruktur ved hjælp af margin, padding, kanter og breddeegenskaber. Forståelse af boksstørrelsesadfærd og elementvisningstyper såsom blok, inline og inline-blok.

Styring af horisontale og vertikale layouts ved hjælp af Flexbox-egenskaber. Justering af retning, justering og afstand for at strukturere UI-komponenter.

Forbedring af layouts ved brug af baggrundsfarver, billeder, pseudo-elementer og skygger. Styling af visuelle komponenter for dybde og kontrast.

Justering af Elementer Lodret

stretch

center

flex-start

flex-end

baseline

1. Hvad gør egenskaben `align-items`?

2. Hvilke af følgende værdier kan bruges med egenskaben `align-items`?