Sisällön perustelu ja kohteiden tasaus
Sijoittakaa lapsielementit pääakselilla justify-*- ja poikittaisakselilla items-*-luokilla yleisten asettelumallien saavuttamiseksi.
Sisällön perustelu ja kohteiden tasaus on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Flex-kohdistuksen kaksi akselia
Flexboxin kohdistus toimii kahdella toisiaan vastaan kohtisuoralla akselilla. Pääakseli kulkee flex-row-luokan suunnassa (vaakasuoraan) tai flex-col-luokan suunnassa (pystysuoraan). Poikkiakseli on pääakseliin nähden kohtisuora. justify-* hallitsee kohdistusta pääakselilla. items-* hallitsee kohdistusta poikkiakselilla. Tämän eron ymmärtäminen on avain flex-asettelun hallintaan.
justify-content: sijoittelu pääakselilla
justify-*-apuluokat vastaavat CSS:n justify-content-ominaisuutta. Flex-rivillä ne hallitsevat elementtiryhmän vaakasuuntaista sijoittelua. justify-start kokoaa elementit vasemmalle (oletus). justify-end kokoaa ne oikealle. justify-center keskittää ryhmän. justify-between jakaa elementit niin, että niiden väliin jää yhtä paljon tilaa. justify-around lisää yhtä paljon tilaa jokaisen elementin ympärille. justify-evenly jakaa tilan tasaisesti myös reunat mukaan lukien.
<div class="flex justify-start gap-2 bg-gray-100 p-4 mb-2"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>
<div class="flex justify-center gap-2 bg-gray-100 p-4 mb-2"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>
<div class="flex justify-between bg-gray-100 p-4 mb-2"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>
<div class="flex justify-end gap-2 bg-gray-100 p-4"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>justify-between: tilan jakaja
justify-between on yksi käytetyimmistä flex-apuluokista. Se sijoittaa ensimmäisen elementin säilön alkuun, viimeisen elementin loppuun ja jakaa muut elementit siten, että niiden väliin jää yhtä paljon tilaa. Tämä on vakiintunut malli navbareissa (logo vasemmalla, linkit oikealla), korteissa (kuvake vasemmalla, toiminto oikealla) ja kaikissa komponenteissa, joissa elementtien tulee täyttää koko leveys ja niiden välille halutaan tilaa.
<!-- Navbar with justify-between -->
<div class="flex items-center justify-between px-6 py-4 bg-white shadow">
<span class="font-bold text-indigo-600">Logo</span>
<button class="bg-indigo-600 text-white text-sm px-4 py-2 rounded">Sign Up</button>
</div>
<!-- Card footer with actions -->
<div class="flex items-center justify-between pt-4 border-t">
<span class="text-sm text-gray-500">Last updated: Today</span>
<button class="text-indigo-600 text-sm font-medium">Edit</button>
</div>align-items: sijoittelu poikkiakselilla
items-*-apuluokat vastaavat CSS:n align-items-ominaisuutta ja hallitsevat elementtien sijoittelua poikkiakselilla. Flex-rivillä tämä tarkoittaa pystysuuntaista kohdistusta. items-start kohdistaa elementit yläreunaan. items-end kohdistaa ne alareunaan. items-center keskittää kaikki elementit pystysuunnassa. items-stretch (oletus) venyttää elementit täyttämään säilön korkeuden. items-baseline kohdistaa tekstin peruslinjat.
<!-- All four items-* values demonstrated in a row -->
<div class="flex items-start h-24 gap-4 bg-gray-100 p-4 mb-2">
<div class="bg-blue-400 p-2 text-sm">Start</div>
</div>
<div class="flex items-center h-24 gap-4 bg-gray-100 p-4 mb-2">
<div class="bg-green-400 p-2 text-sm">Center</div>
</div>
<div class="flex items-end h-24 gap-4 bg-gray-100 p-4">
<div class="bg-red-400 p-2 text-sm">End</div>
</div>items-center: käytetyin kohdistus
items-center-luokkaa käytetään lähes jokaisella flex-rivillä, koska se keskittää kaikki lapset pystysuunnassa niiden yksittäisistä korkeuksista riippumatta. Kuvakkeet, teksti ja painikkeet — vaikka ne olisivat erikokoisia — kohdistuvat kaikki pystysuuntaisten keskipisteidensä mukaan. Näin navbarit, luettelokohdat ja korttien alatunnisteet näyttävät viimeistellyiltä ilman manuaalisia korkeusasetuksia.
<!-- Icon + text + badge: all different heights, all centered -->
<div class="flex items-center gap-3 px-4 py-3 hover:bg-gray-50">
<div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-bold">
JD
</div>
<div>
<p class="font-medium text-gray-900">Jane Doe</p>
<p class="text-xs text-gray-500">Product Designer</p>
</div>
<span class="ml-auto bg-green-100 text-green-700 text-xs font-semibold px-2 py-0.5 rounded-full">
Active
</span>
</div>items-baseline tekstin kohdistukseen
items-baseline kohdistaa elementit siten, että niiden tekstin peruslinjat (isojen kirjainten alareunat) ovat samalla tasolla. Tämä on hyödyllistä, kun samalla rivillä käytetään erikokoisia fontteja — esimerkiksi suurta hintalukua ja sen vieressä pienempää valuuttatunnusta tai yksikkömerkintää. Ilman peruslinjojen kohdistusta erikokoiset elementit näyttävät kömpelöiltä; sen avulla ne muodostavat visuaalisesti yhtenäisen ryhmän.
<!-- Price with currency and period aligned on baseline -->
<div class="flex items-baseline gap-1">
<span class="text-sm font-medium text-gray-500">$</span>
<span class="text-4xl font-extrabold text-gray-900">49</span>
<span class="text-sm font-medium text-gray-500">/month</span>
</div>justify- ja items-luokkien yhdistäminen
Teho syntyy yhdistämällä justify-*- ja items-*-luokat. Klassinen flex items-center justify-center keskittää sisällön samanaikaisesti molemmilla akseleilla. flex items-center justify-between jakaa elementit vaakasuunnassa ja pitää ne samalla pystysuunnassa keskitettyinä — tämä on navbarin vakiomalli. Ajatelkaa tätä kahden itsenäisen akselin hallintana yhtä aikaa.
<!-- Perfect vertical and horizontal centering -->
<div class="min-h-screen flex items-center justify-center">
<p class="text-2xl font-bold">Dead center</p>
</div>
<!-- Navbar pattern -->
<nav class="flex items-center justify-between px-8 h-16 bg-white border-b">
<span class="font-bold">Brand</span>
<button class="text-sm font-medium text-indigo-600">Login</button>
</nav>align-self: yksittäisen elementin ohitus
Siinä missä items-* kohdistaa kaikki lapset samalla tavalla, self-*-apuluokat ohittavat yhden flex-elementin kohdistuksen. self-start, self-end, self-center, self-stretch ja self-baseline toimivat täsmälleen kuten niitä vastaavat items-*-luokat, mutta vaikuttavat elementtiin, johon ne on kirjoitettu, eivät kaikkiin lapsiin. Käyttäkää näitä, kun haluatte irrottaa yhden elementin ryhmän yhteisestä kohdistuksesta.
<!-- Most items centered, but one aligned to the top -->
<div class="flex items-center gap-4 bg-gray-100 p-4 h-24">
<div class="self-start bg-indigo-400 p-3">Top</div>
<div class="bg-green-400 p-3">Middle</div>
<div class="bg-blue-400 p-3">Middle</div>
</div>justify-items Gridissä (ei Flexboxissa)
Älkää sekoittako justify-content-ominaisuutta (flex-säilöille) ja justify-items-ominaisuutta (grid-säilöille). Tailwindissa justify-* hallitsee flex-säilöjen justify-content-ominaisuutta. CSS Gridissä käytetään justify-items-*- ja place-items-*-luokkia. Ne hallitsevat sitä, miten gridin lapset sijoittuvat yksittäisten grid-solujensa sisällä, eivät sitä, miten gridin raidat jakautuvat.
<!-- Flex: justify-between distributes the group -->
<div class="flex justify-between">
<div>A</div><div>B</div><div>C</div>
</div>
<!-- Grid: justify-items centers each item within its cell -->
<div class="grid grid-cols-3 justify-items-center">
<div>A</div><div>B</div><div>C</div>
</div>align-content monirivisessä Flexissä
Kun flex-elementit rivittyvät usealle riville (flex-wrap-luokan avulla), content-*-apuluokat hallitsevat koko rivi- tai sarakejoukon kohdistusta. content-center keskittää kaikki rivit ryhmänä säilössä. content-between jakaa rivit siten, että niiden väliin jää tilaa. Tämä koskee rivi- (tai sarake-)kokoelmaa, ei yksittäisiä elementtejä.
<!-- Multi-line flex with content alignment -->
<div class="flex flex-wrap content-center gap-4 bg-gray-100 h-64 p-4">
<div class="bg-blue-400 p-4 rounded">A</div>
<div class="bg-blue-400 p-4 rounded">B</div>
<div class="bg-blue-400 p-4 rounded">C</div>
<div class="bg-blue-400 p-4 rounded">D</div>
<div class="bg-blue-400 p-4 rounded">E</div>
</div>Käytännössä: ominaisuuskorttirivi
Ominaisuuskorttirivillä käytetään usein yhdistelmää flex items-start (jotta erikorkuiset kortit kohdistuvat yläreunasta) ja gap-6. Kukin kortti käyttää sisäisesti flex flex-col-luokkia, jotta alareunassa oleva ”Lisätietoja”-linkki voidaan työntää alas mt-auto-luokan avulla. Tämä yhdistelmä luo viimeistellyn ominaisuusruudukon, jossa kaikki kortit alkavat samalta pystysuoralta kohdalta.
<div class="flex items-start gap-6">
<div class="flex flex-col flex-1 bg-white rounded-xl p-6 shadow">
<div class="w-10 h-10 bg-indigo-100 rounded-lg mb-4"></div>
<h3 class="font-bold text-gray-900 mb-2">Fast</h3>
<p class="text-gray-500 text-sm flex-1">Lightning-fast builds with the JIT engine.</p>
<a href="#" class="mt-4 text-indigo-600 text-sm font-medium">Learn more →</a>
</div>
<div class="flex flex-col flex-1 bg-white rounded-xl p-6 shadow">
<div class="w-10 h-10 bg-green-100 rounded-lg mb-4"></div>
<h3 class="font-bold text-gray-900 mb-2">Flexible</h3>
<p class="text-gray-500 text-sm flex-1">Customize every aspect with the config.</p>
<a href="#" class="mt-4 text-green-600 text-sm font-medium">Learn more →</a>
</div>
</div>Pikatarkistus
Testatkaa, miten hyvin hallitsette tämän oppitunnin Tailwind CSS Mastery -käsitteet.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte seuraavaa: justify-* hallitsee pääakselin suuntaista kohdistusta (vaakasuunnassa flex-row-asettelussa), items-* hallitsee poikittaisakselin suuntaista kohdistusta (pystysuunnassa flex-row-asettelussa), ja flex items-center justify-between yhdessä on vakiintunut navbar-kuvio. Seuraavaksi hallitsemme sitä, miten flex-lapset kasvavat ja kutistuvat flex-grow-, flex-shrink- ja basis-apuluokkien avulla.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Sisällön perustelu ja kohteiden tasaus” ilmainen?
Kyllä – oppitunnin ”Sisällön perustelu ja kohteiden tasaus” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Sisällön perustelu ja kohteiden tasaus”?
Sijoittakaa lapsielementit pääakselilla justify-*- ja poikittaisakselilla items-*-luokilla yleisten asettelumallien saavuttamiseksi. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Sisällön perustelu ja kohteiden tasaus”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Flexin ja suunnan käyttöönotto
- Sisällön perustelu ja kohteiden tasaus
- Flexin kasvaminen, kutistuminen ja perusta
- Rivitys ja väli