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

bookKohteiden Pystysuuntainen Tasaus Flexboxissa

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

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

Käydään seuraavat esimerkit läpi selvittääksemme, missä tilanteissa tätä tarvitaan.

stretch

Tämä tarkoittaa, että elementit venytetään koko poikittaissuuntaiselle akselille.

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 perustasoon.

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 visual examples of each align-items value?

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

Awesome!

Completion rate improved to 2.56

bookKohteiden Pystysuuntainen 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;

Käydään seuraavat esimerkit läpi selvittääksemme, missä tilanteissa tätä tarvitaan.

stretch

Tämä tarkoittaa, että elementit venytetään koko poikittaissuuntaiselle akselille.

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 perustasoon.

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