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

Egenskapen `align-items` styr den vertikala placeringen av flexobjekt. Standardvärdet är `stretch`.
```css
align-items: stretch | center | flex-start | flex-end | baseline;
```

Låt oss gå igenom följande exempel för att förstå när vi behöver denna egenskap.

## stretch
Det innebär att objekten utökas till hela längden av tväraxeln.

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

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYm9yZGVyOiAxcHggc29saWQga2hha2k7CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIG5hdnk7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogMTIwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## center
Objekt är centrerade längs tväraxeln.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBib3JkZXI6IDFweCBzb2xpZCBraGFraTsKICB3aWR0aDogNjYwcHg7Cn0KCi5jYXJkIHsKICBib3JkZXI6IDFweCBkYXNoZWQgbmF2eTsKICBwYWRkaW5nOiAxMHB4OwogIHdpZHRoOiAxMjBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## flex-start
Alla objekt börjar vid början av tväraxeln.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7CiAgYm9yZGVyOiAxcHggc29saWQga2hha2k7CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIG5hdnk7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogMTIwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## flex-end
Alla objekt placeras i slutet av tväraxeln (i slutet av den överordnade flex-behållaren).

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGZsZXgtZW5kOwogIGJvcmRlcjogMXB4IHNvbGlkIGtoYWtpOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBuYXZ5OwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDEyMHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9ucyAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## baseline
Alla flexobjekt justeras utifrån baslinjen för deras textinnehåll.

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

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGJhc2VsaW5lOwogIGJvcmRlcjogMXB4IHNvbGlkIGtoYWtpOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBuYXZ5OwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDEyMHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9ucyAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

Vilka av följande värden kan användas med egenskapen `align-items`?

Behärska grunderna i CSS (Cascading Style Sheets), det stiliseringsspråk som förändrar utseendet och känslan på webbsidor. Utforska kärnkoncept som textstilar, färger, avstånd, boxmodellen, Flexbox och dekorativa effekter. Bygg upp färdigheter för att skapa visuellt tilltalande och välstrukturerade webbsidor. Perfekt för nybörjare som vill skapa en stabil grund i CSS.

Lär dig vad CSS är, hur det kopplas till HTML och hur HTML-element kan stylas med selektorer. Utforska grundläggande koncept som textfärger, användaraktions-pseudoklasser och variabler i CSS.

Utforska hur du kan formatera och utforma text på dina webbsidor. Lär dig att använda anpassade typsnitt och undersök olika typsnittsegenskaper för att förbättra textens utseende.

Lär dig grunderna i boxmodellen, som definierar layout och avstånd för element på en webbsida. Utforska koncept som boxstorlek, tillägg av utrymme till element, arbete med block- och inline-element samt användning av strukturella och funktionella pseudoklasser för avancerad formatering.

Utforska Flexbox, en kraftfull CSS-layoutmetod för att arrangera element i rader och kolumner. Lär dig att kontrollera riktning, justering och avstånd mellan element horisontellt och vertikalt samt anpassa enskilda flexobjekt för precisa layouter.

Lär dig hur du kan förbättra den visuella attraktionskraften på dina webbsidor med CSS. Utforska tekniker för att använda bakgrundsfärger och bakgrundsbilder, formge bilder, använda dekorativa pseudo-element samt lägga till skuggor för att skapa imponerande designer.

Justera Objekt Vertikalt i Flexbox

stretch

center

flex-start

flex-end

baseline

1. Vad gör egenskapen `align-items`?

2. Vilka av följande värden kan användas med egenskapen `align-items`?

Awesome!

Justera Objekt Vertikalt i Flexbox

stretch

center

flex-start

flex-end

baseline

1. Vad gör egenskapen `align-items`?

2. Vilka av följande värden kan användas med egenskapen `align-items`?

Justera Objekt Vertikalt i Flexbox

stretch

center

flex-start

flex-end

baseline

1. Vad gör egenskapen align-items?

2. Vilka av följande värden kan användas med egenskapen align-items?

Awesome!

Justera Objekt Vertikalt i Flexbox

stretch

center

flex-start

flex-end

baseline

1. Vad gör egenskapen align-items?

2. Vilka av följande värden kan användas med egenskapen align-items?

1. Vad gör egenskapen `align-items`?

2. Vilka av följande värden kan användas med egenskapen `align-items`?

1. Vad gör egenskapen `align-items`?

2. Vilka av följande värden kan användas med egenskapen `align-items`?