CSS Academy · Oppitunti

Display, flex ja flex-direction

Otat käyttöön flexboxin säilössä ja hallitsette pääakselin suunnan flex-direction-ominaisuudella.

Oppitunti 1/413 vaihetta

Display, flex ja flex-direction on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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 CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Flexboxin käyttöönotto

Flexbox otetaan käyttöön asettamalla display: flex säilöelementille eli flex-säilölle. Sen suorista lapsielementeistä tulee automaattisesti flex-alkioita.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

Inline Flex

display: inline-flex luo flex-säilön, joka sijoittuu rivinsisäisesti (kuten inline-block) lohkon sijaan. Sisäinen flexbox-toiminta on sama.

<p>Status: <span class="badge">🔥 Trending</span></p>

Pääakseli ja poikittaisakseli

Flexboxissa on kaksi akselia:

Pääakseli: ensisijainen suunta, johon alkiot sijoitellaan
Poikittaisakseli: pääakseliin nähden kohtisuora akseli

Kaikki flex-ominaisuudet viittaavat näihin akseleihin eivätkä kiinteisiin suuntiin.

flex-direction: row (oletus)

Oletussuunta on row: alkiot sijoitetaan vasemmalta oikealle vaakasuuntaista pääakselia pitkin.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column

flex-direction: column pinoaa alkiot pystysuunnassa. Pääakselista tulee pystysuuntainen ja poikittaisakselista vaakasuuntainen.

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

row-reverse kääntää vaakasuuntaisen järjestyksen: alkiot sijoitetaan oikealta vasemmalle. Pääakseli alkaa oikealta.

<nav class="rtl-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column-reverse

column-reverse pinoaa alkiot alhaalta ylöspäin. Viimeinen alkio näkyy ylimpänä.

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

flex-direction vaikuttaa kaikkiin flex-ominaisuuksiin

Kun flex-suuntaa muutetaan, myös justify-content muuttaa suuntaansa. Jos suuntana on column, justify-content kohdistaa alkiot pystyakselin eikä vaaka-akselin suunnassa.

Yksinkertainen vaakasuuntainen asettelu

Yksinkertaisin flexboxin käyttötapaus — alkioiden keskittäminen navigaatiossa:

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

Yksinkertainen pystysuuntainen asettelu

Kortin sisällön keskittäminen pysty- ja vaakasuunnassa:

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

flex-flow-lyhytmuoto

flex-flow on lyhytmuoto ominaisuuksille flex-direction ja flex-wrap:

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Pikatarkistus

Kun asetuksena on flex-direction: column, mitä akselia justify-content hallitsee?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Aseta säilölle display: flex, niin sen lapsielementeille luodaan flex-konteksti. flex-direction määrittää pääakselin suunnan: row (vaakasuuntainen) tai column (pystysuuntainen). Kaikki flex-kohdistusominaisuudet ovat suhteessa näihin akseleihin eivätkä kiinteisiin vasen/oikea- tai ylös/alas-suuntiin.

Aloita maksutta

Opi CSS 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: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Display, flex ja flex-direction” ilmainen?

Kyllä – oppitunnin ”Display, flex ja flex-direction” 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 CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Display, flex ja flex-direction”?

Otat käyttöön flexboxin säilössä ja hallitsette pääakselin suunnan flex-direction-ominaisuudella. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Display, flex ja flex-direction”-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ä CSS Academy-oppitunnilla?

Kyllä. Jokainen 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

← Takaisin: CSS Academy