Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Kohteiden Pystysuora Tasaus Flexboxissa | Flexboxin Hallinta Asetteluja Varten
CSS:n Perusteet

bookKohteiden Pystysuora Tasaus Flexboxissa

align-items-ominaisuus määrittää flex-elementtien pystysuuntaisen asettelun. Oletusarvo on stretch.

align-items: stretch | center | flex-start | flex-end | baseline;

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

stretch

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

index.html

index.html

index.css

index.css

copy

keskitetty

Kohteet ovat ristikkäisakselin keskellä.

index.html

index.html

index.css

index.css

copy

flex-start

Kaikki kohteet alkavat poikittaisakselin alusta.

index.html

index.html

index.css

index.css

copy

flex-end

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

index.html

index.html

index.css

index.css

copy

baseline

Kaikki flex-elementit kohdistetaan niiden tekstisisällön perusviivan mukaan.

index.html

index.html

index.css

index.css

copy

1. Mitä align-items-ominaisuus tekee?

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

question mark

Mitä align-items-ominaisuus tekee?

Select the correct answer

question mark

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

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 4

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you explain the difference between align-items and justify-content?

Can you show examples of how each align-items value looks in code?

When should I use each align-items value in a real project?

Awesome!

Completion rate improved to 2.56

bookKohteiden Pystysuora Tasaus Flexboxissa

Pyyhkäise näyttääksesi valikon

align-items-ominaisuus määrittää flex-elementtien pystysuuntaisen asettelun. Oletusarvo on stretch.

align-items: stretch | center | flex-start | flex-end | baseline;

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

stretch

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

index.html

index.html

index.css

index.css

copy

keskitetty

Kohteet ovat ristikkäisakselin keskellä.

index.html

index.html

index.css

index.css

copy

flex-start

Kaikki kohteet alkavat poikittaisakselin alusta.

index.html

index.html

index.css

index.css

copy

flex-end

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

index.html

index.html

index.css

index.css

copy

baseline

Kaikki flex-elementit kohdistetaan niiden tekstisisällön perusviivan mukaan.

index.html

index.html

index.css

index.css

copy

1. Mitä align-items-ominaisuus tekee?

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

question mark

Mitä align-items-ominaisuus tekee?

Select the correct answer

question mark

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

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 4
some-alt