CSS Academy · Oppitunti

Flexboxin yleiset asettelut: navigointi, kortit ja mediaobjekti

Rakentakaa käytännöllisiä navigointipalkkeja, korttiruudukoita ja mediaobjekteja flexboxilla.

Oppitunti 4/413 vaihetta

Flexboxin yleiset asettelut: navigointi, kortit ja mediaobjekti on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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.

Miksi Flexbox-mallit ovat tärkeitä

Tietyt asettelumallit toistuvat lähes jokaisessa verkkoprojektissa. Flexbox ratkaisee ne tehokkaasti vähäisellä CSS-määrällä. Näiden mallien tunteminen nopeuttaa kehitystä ja vähentää koodin määrää.

Navigointipalkin malli

Vaakasuuntainen navigointi, jossa logo on vasemmalla ja linkit oikealla:

<nav class="navbar">
  <span class="logo">Brand</span>
  <div class="nav-links">
    <a href="#">Home</a>
    <a href="#">About</a>
  </div>
</nav>

Keskitetty hero-osio

Koko näkymän korkuinen keskitetty sisältö Flexboxilla:

<div class="hero">
  <h1>Welcome</h1>
</div>

Korttiruudukko

Responsiivinen korttiruudukko, jossa kohteet rivittyvät ja välit pysyvät yhtenäisinä:

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
</div>

Mediaobjekti

Mediaobjekti — kiinteän levyinen kuva joustavan tekstin vieressä — on käyttöliittymien perustavanlaatuinen malli, jota käytetään kommenteissa, sosiaalisen median julkaisuissa ja luettelokohteissa:

<div class="media">
  <img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
  <div class="media-body">
    <strong>Jane Doe</strong>
    <p>Comment text goes here.</p>
  </div>
</div>

Flexboxilla toteutettu tarttuva alatunniste

Siirrä alatunniste alareunaan määrittämättä kiinteitä korkeuksia:

<main>Main content that grows to fill available space</main>
<footer>Footer</footer>

Kuvake ja teksti -painike

Pystysuunnassa keskitetty kuvake ja teksti painikkeessa:

<button class="btn">
  <svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
  Download
</button>

Holy Grail Flexboxilla

Kolmisarakkeinen Holy Grail -asettelu (ylätunniste, alatunniste, sivupalkki–pääsisältö–sivupalkki):

<div class="holy-grail">
  <div class="left-sidebar">Left</div>
  <div class="main-content">Main</div>
  <div class="right-sidebar">Right</div>
</div>

Lomakerivi selitteineen

Lomakerivin kohdistetut selite–syötekenttä-parit:

<div class="form-row">
  <label>Email</label>
  <input type="email" />
</div>

Pienoiskuvagalleria

Rivittävä kuvagalleria:

<div class="gallery">
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>

Siru- ja tunnisteluettelo

Tekstin tavoin virtaavat ja rivittyvät sirut ja tunnisteet:

<div class="tags">
  <span class="tag">CSS</span>
  <span class="tag">Flexbox</span>
  <span class="tag">Layout</span>
</div>

Pikatarkistus

Mikä estää mediaobjektin tekstiosaa vuotamasta yli, jos se sisältää pitkän katkaisemattoman merkkijonon?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Yleisiä Flexbox-malleja ovat navigointipalkki (logo + automaattinen reunus + linkit), hero-osio (sarake + keskitys pääakselilla), mediaobjekti (kiinteä kuva + flex:1-tekstiosa, jolla on min-width:0), tarttuva alatunniste (sarakeasettelu + flex:1-pääsisältö) ja korttiruudukko (rivitys + flex:1 1 Xpx). Nämä viisi mallia kattavat suurimman osan käytännön asettelutarpeista.

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 ”Flexboxin yleiset asettelut: navigointi, kortit ja mediaobjekti” ilmainen?

Kyllä – oppitunnin ”Flexboxin yleiset asettelut: navigointi, kortit ja mediaobjekti” 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 ”Flexboxin yleiset asettelut: navigointi, kortit ja mediaobjekti”?

Rakentakaa käytännöllisiä navigointipalkkeja, korttiruudukoita ja mediaobjekteja flexboxilla. 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 4/4.

Kuinka kauan ”Flexboxin yleiset asettelut: navigointi, kortit ja mediaobjekti”-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

Flex-kohteen tasausohitus align-selfillä
Order-ominaisuus ja visuaalinen uudelleenjärjestäminen
Flex-lyhytmerkinnän mallit
Flexboxin yleiset asettelut: navigointi, kortit ja mediaobjekti

← Takaisin: CSS Academy