Asettelun Hallinta Flexbox-Apuohjelmilla
Tailwind CSS tarjoaa apuluokkia, joiden avulla voit helposti luoda joustavia ja responsiivisia asetteluja Flexboxin avulla. Näiden apuluokkien avulla hallitset elementtien asettelua ja kohdistusta säiliön sisällä.
Näytön asettaminen Flex-tilaan
Asettaaksesi elementin käyttämään Flexbox-asettelua, voit käyttää flex-luokkaa. Tämä luokka asettaa display-ominaisuuden arvoksi flex.
index.html
Tässä esimerkissä vanhemman flex-elementin div-luokka tekee siitä joustavan säiliön, ja lapsi-div-elementit (flex-1) jakavat tilan tasaisesti.
Flex-suunnan hallinta
Flex-suunnan apuluokat mahdollistavat sen, että voit määrittää, mihin suuntaan joustavat elementit sijoitetaan säiliössä. Voit asettaa suunnan riviksi (oletus), sarakkeeksi, käänteiseksi riviksi tai käänteiseksi sarakkeeksi seuraavilla luokilla:
| Class | Description |
|---|---|
flex-row | Sijoittaa elementit riviin (oletus). |
flex-col | Sijoittaa elementit sarakkeeseen. |
flex-row-reverse | Sijoittaa elementit käänteiseen riviin. |
flex-col-reverse | Sijoittaa elementit käänteiseen sarakkeeseen. |
index.html
Tässä esimerkissä flex-col-luokka asettaa flex-suunnan sarakkeeksi, jolloin kohteet pinotaan pystysuunnassa.
Kohteiden tasaus vaakasuunnassa
Justify-content-apuluokat hallitsevat kohteiden vaakasuuntaista tasausta flex-kontainerissa. Käytettävissä olevat luokat ovat:
| Class | Description |
|---|---|
justify-start | Kohteet tasataan alkuun. |
justify-center | Kohteet tasataan keskelle. |
justify-end | Kohteet tasataan loppuun. |
justify-between | Kohteet jaetaan tasaisesti, väliin jää tilaa. |
justify-around | Kohteet jaetaan tasaisesti, ympärille jää tilaa. |
justify-evenly | Kohteet jaetaan tasaisesti, yhtä paljon tilaa ympärillä. |
index.html
Tässä esimerkissä justify-center-luokka keskittää kohteet vaakasuunnassa flex-kontainerin sisällä.
Kohteiden pystysuuntainen tasaus
Align-items-apuluokat hallitsevat kohteiden pystysuuntaista tasausta flex-kontainerissa. Käytettävissä olevat luokat ovat:
| Luokka | Kuvaus |
|---|---|
items-start | Kohteet tasataan alkuun. |
items-center | Kohteet tasataan keskelle. |
items-end | Kohteet tasataan loppuun. |
items-baseline | Kohteet tasataan niiden tekstin peruslinjan mukaan. |
items-stretch | Kohteet venytetään täyttämään kontaineri (oletus). |
index.html
Tässä esimerkissä items-center-luokka keskittää kohteet pystysuunnassa flex-kontainerin sisällä.
Huomio
Jos etsit jotain tiettyä, seuraa linkkiä.
1. Mikä luokka asettaa display-ominaisuuden arvoksi flex?
2. Miten asetetaan flex-suunnan arvoksi sarake (column)?
3. Mikä luokka keskittää kohteet vaakasuunnassa flex-kontainerissa?
4. Mikä apuluokka keskittää kohteet pystysuunnassa flex-kontainerissa?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you show me an example of using these Tailwind Flexbox classes?
What are some common use cases for Flexbox in Tailwind CSS?
How do I combine multiple flex utilities for more complex layouts?
Awesome!
Completion rate improved to 3.57Asettelun Hallinta Flexbox-Apuohjelmilla
Pyyhkäise näyttääksesi valikon
Tailwind CSS tarjoaa apuluokkia, joiden avulla voit helposti luoda joustavia ja responsiivisia asetteluja Flexboxin avulla. Näiden apuluokkien avulla hallitset elementtien asettelua ja kohdistusta säiliön sisällä.
Näytön asettaminen Flex-tilaan
Asettaaksesi elementin käyttämään Flexbox-asettelua, voit käyttää flex-luokkaa. Tämä luokka asettaa display-ominaisuuden arvoksi flex.
index.html
Tässä esimerkissä vanhemman flex-elementin div-luokka tekee siitä joustavan säiliön, ja lapsi-div-elementit (flex-1) jakavat tilan tasaisesti.
Flex-suunnan hallinta
Flex-suunnan apuluokat mahdollistavat sen, että voit määrittää, mihin suuntaan joustavat elementit sijoitetaan säiliössä. Voit asettaa suunnan riviksi (oletus), sarakkeeksi, käänteiseksi riviksi tai käänteiseksi sarakkeeksi seuraavilla luokilla:
| Class | Description |
|---|---|
flex-row | Sijoittaa elementit riviin (oletus). |
flex-col | Sijoittaa elementit sarakkeeseen. |
flex-row-reverse | Sijoittaa elementit käänteiseen riviin. |
flex-col-reverse | Sijoittaa elementit käänteiseen sarakkeeseen. |
index.html
Tässä esimerkissä flex-col-luokka asettaa flex-suunnan sarakkeeksi, jolloin kohteet pinotaan pystysuunnassa.
Kohteiden tasaus vaakasuunnassa
Justify-content-apuluokat hallitsevat kohteiden vaakasuuntaista tasausta flex-kontainerissa. Käytettävissä olevat luokat ovat:
| Class | Description |
|---|---|
justify-start | Kohteet tasataan alkuun. |
justify-center | Kohteet tasataan keskelle. |
justify-end | Kohteet tasataan loppuun. |
justify-between | Kohteet jaetaan tasaisesti, väliin jää tilaa. |
justify-around | Kohteet jaetaan tasaisesti, ympärille jää tilaa. |
justify-evenly | Kohteet jaetaan tasaisesti, yhtä paljon tilaa ympärillä. |
index.html
Tässä esimerkissä justify-center-luokka keskittää kohteet vaakasuunnassa flex-kontainerin sisällä.
Kohteiden pystysuuntainen tasaus
Align-items-apuluokat hallitsevat kohteiden pystysuuntaista tasausta flex-kontainerissa. Käytettävissä olevat luokat ovat:
| Luokka | Kuvaus |
|---|---|
items-start | Kohteet tasataan alkuun. |
items-center | Kohteet tasataan keskelle. |
items-end | Kohteet tasataan loppuun. |
items-baseline | Kohteet tasataan niiden tekstin peruslinjan mukaan. |
items-stretch | Kohteet venytetään täyttämään kontaineri (oletus). |
index.html
Tässä esimerkissä items-center-luokka keskittää kohteet pystysuunnassa flex-kontainerin sisällä.
Huomio
Jos etsit jotain tiettyä, seuraa linkkiä.
1. Mikä luokka asettaa display-ominaisuuden arvoksi flex?
2. Miten asetetaan flex-suunnan arvoksi sarake (column)?
3. Mikä luokka keskittää kohteet vaakasuunnassa flex-kontainerissa?
4. Mikä apuluokka keskittää kohteet pystysuunnassa flex-kontainerissa?
Kiitos palautteestasi!
