A CSS Flexbox 5 perc alatt megtanulható - oktatóanyag kezdőknek

Gyors bevezetés a népszerű elrendezési modulba

Ebben a bejegyzésben megismerheti a CSS Flexbox alapjait, amely az elmúlt néhány évben kötelező fejlesztéssé vált a webfejlesztők és a tervezők számára.

Például egy navigációs sávot fogunk használni, mivel ez egy nagyon tipikus eset a Flexbox esetében. Ez bemutatja a modul leggyakrabban használt tulajdonságait, miközben kihagyja azokat, amelyek nem annyira kritikusak.

Létrehoztam egy ingyenes, 12 részes tanfolyamot is a Flexbox-on. Nézd meg itt, ha érdekel!

Most kezdjük!

Az első Flexbox elrendezés

A Flexbox elrendezés két fő eleme a tároló és az elemek .

Itt található a példánk HTML-je, amely három elemből álló tárolót tartalmaz:

 Home Search Logout 

Mielőtt ezt egy Flexbox elrendezéssé változtatnánk, az elemek így kerülnek egymásra:

Hozzáadtam egy kis stílust, de ennek semmi köze a Flexboxhoz.

Hozzáadtam egy kis stílust, de ennek semmi köze a Flexboxhoz.

Ennek Flexbox elrendezéssé alakításához egyszerűen megadjuk a tárolónak a következő CSS tulajdonságot:

.container { display: flex; } 

Ez automatikusan pozícionálja az elemeket a vízszintes tengely mentén.

Ha meg akarja nézni a tényleges kódot, átmehet erre a Scrimba játszótérre.

Most keverjük össze ezeket az elemeket egy kicsit.

Indokolja a tartalmat és az elemek igazítását

A Justify-content és az align-items két CSS-tulajdonság, amelyek segítenek a tárolóban lévő elemek terjesztésében. Ők szabályozzák, hogy az elemek hogyan helyezkednek el a fő tengely és a kereszttengely mentén .

Esetünkben (de nem mindig) a fő tengely vízszintes, a kereszt tengely pedig függőleges:

Ebben a cikkben csak megnézzük justify-content, mivel rájöttem, hogy ezt sokkal jobban használja, mint align-items. A Flexbox tanfolyamomon azonban mindkét tulajdonságot részletesen elmagyarázom.

Központozzuk az összes elemet a főtengely mentén a következők használatával justify-content:

.container { display: flex; justify-content: center; } 

Vagy beállíthatjuk a következőre space-between: ami helyet ad az elemek között, így:

.container { display: flex; justify-content: space-between; } 

Itt vannak azok az értékek, amelyekre beállíthatja justify-content:

  • flex-start ( alapértelmezett )
  • flex-end
  • központ
  • szóköz között
  • tér körül
  • tér-egyenletesen

Azt javaslom, hogy játsszon körül ezekkel, és nézze meg, hogyan játszanak az oldalon. Ennek meg kell adnia a koncepció megfelelő megértését.

Egyetlen elem vezérlése

Egyetlen elemet is vezérelhetünk . Tegyük fel, hogy például az első két elemet a bal oldalon akarjuk tartani, de a logoutgombot jobb oldalra mozgatjuk .

Ehhez a régi jó technikát alkalmazzuk a margó beállítására auto.

.logout { margin-left: auto; } 

Ha azt szeretnénk, hogy mind az searchelem, mind az elem logouta jobb oldalra kerüljön, akkor egyszerűen hozzáadjuk margin-leftaz searchelemet az elemhez.

.search { margin-left: auto; } 

A keresési elemet a lehető legjobban tolja, ami ismét a kijelentkezési elemet nyomja vele:

A flex tulajdonság

Eddig csak fix szélességű tárgyaink voltak. De mi van, ha azt akarjuk, hogy reagálók legyenek? Ennek eléréséhez van egy úgynevezett tulajdonságunk flex. Sokkal könnyebbé teszi, mint a százalékok régi módszerét.

Egyszerűen megcélozzuk az összes elemet, és flexértéket adunk nekik 1.

.container > div { flex: 1; } 

Amint láthatja, kinyújtja az elemeket, hogy megtöltse az egész edényt.

Sok esetben valószínűleg azt szeretné, ha az egyik elem felvenné a plusz szélességet, és ezáltal csak az egyiket állítaná rugalmas szélességűvé. Megtehetjük például, hogy az searchelem az összes extra helyet elfoglalja:

.search { flex: 1; } 

Mielőtt befejeznénk ezt a cikket, meg akarom említeni, hogy a flex tulajdonság tulajdonképpen három rövid tulajdonság: flex-grow , flex-shrink és flex-basis . Azonban ezek megtanulása több mint öt percet vesz igénybe, így ez az oktatóanyag hatályán kívül esik.

Ha mégis érdekli őket, akkor mindhárom tulajdonságot alaposan elmagyarázom az ingyenes Flexbox tanfolyamomon.

Most, hogy megtanulta az alapokat, biztosan készen áll a teljes hosszúságú tanfolyamom elvégzésére, és Flexbox mesterré válhat!

Köszönöm, hogy elolvasta! A nevem Per Borgen, a Scrimba társalapítója vagyok - ez a legegyszerűbb módja a kódolás megtanulásának. Tekintse meg adaptív webdesign bootcampunkat, ha meg akarja tanulni a modern weboldal professzionális felépítését.