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

`align-items`-ominaisuus määrittää flex-elementtien pystysuuntaisen asettelun. Oletusarvo on `stretch`.
```css
align-items: stretch | center | flex-start | flex-end | baseline;
```

Tarkastellaan seuraavia esimerkkejä ymmärtääksemme, missä tilanteissa tätä tarvitaan.

## stretch
Tämä tarkoittaa, että elementit venytetään koko poikittaisakselin pituudelle.

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

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYm9yZGVyOiAxcHggc29saWQga2hha2k7CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIG5hdnk7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogMTIwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## keskitetty
Kohteet ovat ristikkäisakselin keskellä.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBib3JkZXI6IDFweCBzb2xpZCBraGFraTsKICB3aWR0aDogNjYwcHg7Cn0KCi5jYXJkIHsKICBib3JkZXI6IDFweCBkYXNoZWQgbmF2eTsKICBwYWRkaW5nOiAxMHB4OwogIHdpZHRoOiAxMjBweDsKfQoKLmNhcmQgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## flex-start
Kaikki kohteet alkavat poikittaisakselin alusta.

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7CiAgYm9yZGVyOiAxcHggc29saWQga2hha2k7CiAgd2lkdGg6IDY2MHB4Owp9CgouY2FyZCB7CiAgYm9yZGVyOiAxcHggZGFzaGVkIG5hdnk7CiAgcGFkZGluZzogMTBweDsKICB3aWR0aDogMTIwcHg7Cn0KCi5jYXJkIGltZyB7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi8qIFJlbW92ZSBkZWZhdWx0IGRlY29yYXRpb25zICovCnVsIHsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKfQ==

## flex-end
Kaikki kohteet ovat poikittaisakselin lopussa (vanhemman flex-kontainerin lopussa).

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGZsZXgtZW5kOwogIGJvcmRlcjogMXB4IHNvbGlkIGtoYWtpOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBuYXZ5OwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDEyMHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9ucyAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## baseline
Kaikki flex-elementit kohdistetaan niiden tekstisisällön perustasoon.

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

LmNhcmRzLWxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGJhc2VsaW5lOwogIGJvcmRlcjogMXB4IHNvbGlkIGtoYWtpOwogIHdpZHRoOiA2NjBweDsKfQoKLmNhcmQgewogIGJvcmRlcjogMXB4IGRhc2hlZCBuYXZ5OwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDEyMHB4Owp9CgouY2FyZCBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9ucyAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

Mitkä seuraavista arvoista voidaan käyttää `align-items`-ominaisuuden kanssa?

Hallitse CSS:n (Cascading Style Sheets) perusteet, tyylikieli, joka muuttaa verkkosivujen ulkoasun ja tunnelman. Tutustu keskeisiin käsitteisiin, kuten tekstityyleihin, väreihin, välistyksiin, laatikkomalliin, Flexboxiin ja koristeellisiin tehosteisiin. Kehitä taidot luoda visuaalisesti houkuttelevia ja selkeästi jäsenneltyjä verkkosivuja. Sopii erinomaisesti aloittelijoille, jotka haluavat vahvan perustan CSS:stä.

Tutustu CSS:n perusteisiin, sen liittämiseen HTML:ään ja HTML-elementtien muotoiluun selektoreiden avulla. Perehdy keskeisiin käsitteisiin, kuten tekstin väreihin, käyttäjän toimintaan reagoiviin pseudoluokkiin ja CSS-muuttujiin.

Opi, kuinka tekstiä muotoillaan ja asetellaan verkkosivuilla. Tutustu mukautettujen fonttien käyttöön ja erilaisiin fonttiominaisuuksiin tekstin ulkoasun parantamiseksi.

Opi laatikkomallin perusteet, jotka määrittelevät elementtien asettelun ja välistyksen verkkosivulla. Tutustu käsitteisiin kuten laatikon koko, tilan lisääminen elementteihin, lohkotason ja rivinsisäisten elementtien käsittely sekä rakenteellisten ja toiminnallisten pseudoluokkien hyödyntäminen edistyneessä tyylittelyssä.

Tutustu Flexboxiin, tehokkaaseen CSS-asettelumenetelmään elementtien järjestämiseksi riveihin ja sarakkeisiin. Opi hallitsemaan elementtien suuntaa, kohdistusta ja välistystä vaaka- ja pystysuunnassa sekä mukauttamaan yksittäisiä flex-elementtejä tarkkoja asetteluja varten.

Opi parantamaan verkkosivujesi visuaalista ilmettä CSS:n avulla. Tutustu taustavärien ja -kuvien lisäämiseen, kuvien tyylittelyyn, koristeellisten pseudoelementtien käyttöön sekä varjojen lisäämiseen vaikuttavien suunnittelujen luomiseksi.

Kohteiden Pystysuora Tasaus Flexboxissa

stretch

keskitetty

flex-start

flex-end

baseline

1. Mitä `align-items`-ominaisuus tekee?

2. Mitkä seuraavista arvoista voidaan käyttää `align-items`-ominaisuuden kanssa?