Summary
The CSS align-items property controls the vertical positioning of items within a flex container by setting values like stretch, center, flex-start, flex-end, and baseline.

General domain of usage
Web UI layout and design

Egenskapen `align-items` styr den vertikale plasseringen av flex-elementer. Standardverdien er `stretch`.
```css
align-items: stretch | center | flex-start | flex-end | baseline;
```

La oss gjennomgå følgende eksempler for å se når vi trenger denne egenskapen.

## stretch
Dette betyr at elementene utvides til hele lengden av tverraksen.

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

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYm9yZGVyOiAxcHggc29saWQga2hha2k7CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIG5hdnk7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogMTIwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## center
Elementene er plassert i midten av tverraksen.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBib3JkZXI6IDFweCBzb2xpZCBraGFraTsKICB3aWR0aDogNjYwcHg7Cn0KCi5jYXJkIHsKICBib3JkZXI6IDFweCBkYXNoZWQgbmF2eTsKICBwYWRkaW5nOiAxMHB4OwogIHdpZHRoOiAxMjBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## flex-start
Alle elementer starter ved begynnelsen av tverraksen.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7CiAgYm9yZGVyOiAxcHggc29saWQga2hha2k7CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIG5hdnk7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogMTIwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## flex-end
Alle elementer er plassert på slutten av tverraksen (i enden av den overordnede flex-beholderen).

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGZsZXgtZW5kOwogIGJvcmRlcjogMXB4IHNvbGlkIGtoYWtpOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBuYXZ5OwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDEyMHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9ucyAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## baseline
Alle flex-elementer justeres basert på tekstinnholdets grunnlinje.

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

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGJhc2VsaW5lOwogIGJvcmRlcjogMXB4IHNvbGlkIGtoYWtpOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBuYXZ5OwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDEyMHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9ucyAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

Hvilke av følgende verdier kan brukes med egenskapen `align-items`?

Lær det grunnleggende i CSS (Cascading Style Sheets), stilsett-språket som forvandler utseendet og følelsen til nettsider. Utforsk kjernebegreper som tekststiler, farger, mellomrom, boksmodellen, Flexbox og dekorative effekter. Bygg ferdigheter for å lage visuelt tiltalende og godt strukturerte nettsider. Perfekt for nybegynnere som ønsker et solid grunnlag i CSS.

Lær hva CSS er, hvordan det kobles til HTML, og hvordan HTML-elementer styles ved hjelp av selektorer. Utforsk grunnleggende konsepter som tekstfarger, brukerhandlings-pseudoklasser og variabler i CSS.

Utforsk hvordan du kan style og formatere tekst på nettsidene dine. Lær å bruke egendefinerte skrifttyper og undersøk ulike skriftegenskaper for å forbedre tekstens utseende.

Lær det grunnleggende om boksmodellen, som definerer oppsett og avstand for elementer på en nettside. Utforsk konsepter som boksstørrelse, å legge til avstand til elementer, arbeid med blokk- og linjeelementer, samt bruk av strukturelle og funksjonelle pseudoklasser for avansert styling.

Utforsk Flexbox, en kraftig CSS-metode for å arrangere elementer i rader og kolonner. Lær hvordan du kontrollerer retning, justering og avstand mellom elementer horisontalt og vertikalt, samt tilpasser individuelle flex-elementer for presise oppsett.

Lær hvordan du kan forbedre det visuelle uttrykket på nettsidene dine med CSS. Utforsk teknikker for å bruke bakgrunnsfarger og bakgrunnsbilder, style bilder, benytte dekorative pseudo-elementer og legge til skygger for å skape imponerende design.

Justering av Elementer Vertikalt i Flexbox

stretch

center

flex-start

flex-end

baseline

1. Hva gjør egenskapen `align-items`?

2. Hvilke av følgende verdier kan brukes med egenskapen `align-items`?

Awesome!

Justering av Elementer Vertikalt i Flexbox

stretch

center

flex-start

flex-end

baseline

1. Hva gjør egenskapen `align-items`?

2. Hvilke av følgende verdier kan brukes med egenskapen `align-items`?

Justering av Elementer Vertikalt i Flexbox

stretch

center

flex-start

flex-end

baseline

1. Hva gjør egenskapen align-items?

2. Hvilke av følgende verdier kan brukes med egenskapen align-items?

Awesome!

Justering av Elementer Vertikalt i Flexbox

stretch

center

flex-start

flex-end

baseline

1. Hva gjør egenskapen align-items?

2. Hvilke av følgende verdier kan brukes med egenskapen align-items?

1. Hva gjør egenskapen `align-items`?

2. Hvilke av følgende verdier kan brukes med egenskapen `align-items`?

1. Hva gjør egenskapen `align-items`?

2. Hvilke av følgende verdier kan brukes med egenskapen `align-items`?