A következőkben pár gyakori weboldal elrendezés flexbox alapú megvalósítását nézzük meg.

Forrás

A bejegyzés alapjául a következő forrás szolgált: link

Ha nem vagy tisztában a flexbox modell alapjaival, akkor célszerű először a A flexbox modell című bejegyzést elolvasni.

Alapelrendezés

A kiindulásunk pár, az alábbi minta szerint megformázott <div> elem lesz . (A <div>-ek magasságát, ahol szükséges, változtatni fogjuk, viszont a .container div formázást már nem tüntetjük fel a példákban.)

Minta 1.

Rendezzük a fenti <div> elemeket egymás mellé arányosan. A flex-grow: 1 tulajdonsággal írjuk elő, hogy minden elem azonos szélességűre legyen kihúzva a sorban, míg közöttük 2%-os margót állítunk be. (A .item + .item tulajdonságai minden olyan elemre illeszkednek, melyek .item osztályba tartoznak, és közben .item osztályba tartozó elemek után következnek. )

Amennyiben bizonyos elemeket kétszer olyan szélesre szeretnénk állítani, mint a többit, akkor ezekre a flex-grow: 2 tulajdonságot kell illeszteni. (A többieken marad a flex-grow: 1)

Minta 2.

Dolgozzunk most 3 elemmel. Az oldal jobb és bal oldalán rögzített szélességű (width: 100px) elemeket jelenítsünk meg, míg középső részt töltse ki a középső elem. Ehhez csupán annyit kell tennünk, hogy csak a középső elemre húzzuk rá a flex-grow: 1 tulajdonságot.

  .container {
    display: flex;
  }

  .item {
    width: 100px;		
  }
  
  .item_center {
    flex-grow: 1;
  }

  .item + .item {
    margin-left: 2%;
  }


  

  

  

Minta 3.

A következő elrendezésben az elemek felváltva jelennek meg különböző szélességgel a sorokban. Ehhez bekapcsoljuk az elemek sortörését (flex-wrap: wrap), előírjuk, hogy a szabad helyek közöttük egyenlően kerüljenek elosztásra (justify-content: space-between), így nem kell a margókkal játszanunk, és minden 3. elem szélességét 100%-ra állítjuk. (width: 100%) A többi marad 48%-on (width: 48%), így a maradék 2% lesz az elemek között elosztva. Még beállítunk a sorok között egy 2%-os távolságot (margin-bottom: 2%)

Kérdés: Ha 48%-ról 50%-ra állítjuk az elemek szélességét (a haramdikok kivételével), akkor miért nem jelenik meg a 2 elem egymás mellett egy sorban, hiszen 2×50% az 100%? Válasz: Mert be van állítva a keret szélessége 1 pixelre, és ezzel együtt már a két 50% szélességű elem nem fér el 100%-on. Ha levisszük 0 pixelre a keretet, elférnek egymás mellett.

Minta 4.

Készítsünk most egy 3×3-as rácsot.

Az előzőek alapján ez már egyszerű. Bekapcsoljuk a sortörést, és az elemek szélességét úgy állítjuk be, hogy 3 férjen el egy sorban (width: 32%).

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

.item {
  width: 32%;
  margin-bottom: 2%;		
}

Minta 5.

Készítsük most el úgy a 3×3-as rácsot, hogy az elemek ne csak vízszintesen, hanem függőlegesen is rugalmasan töltsék ki a rendelkezésre álló helyet, mégpedig azonos oldalhosszal. Ehhez egy trükköt használunk fel: Eltávolítjuk az elemek magasságát (vagyis töröljük a height: 100px sort), és az item osztályban a padding-bottom: 32% értéket állítjuk be. Ilyenkor (vagyis ha a %-osan adjuk meg) az elem padding értéket a szélességből számítja ki. Persze ez csak látszólagosan jelenít meg négyzeteket, hiszen ha valamilyen tartalmat írnánk a elemekbe, az elem magassága a tartalom magasságával növekedne.

Minta 6.

Készítsük most el a fenti feladatot úgy, hogy egy 16:9-es arányú képernyő arányát vegyék fel az elemek. Ehhez csupán a padding-bottom: 18% értéket kell beállítanunk. (A 32%-os szélesség úgy aránylik a 18%-os padding-hoz, mint 16 a 9-hez.)

Minta 7.

A következő elrendezés egy függőleges oszlopdiagramra hasonlít. A CSS kód egyértelmű, beállítjuk az egyes elemek szélességét és magasságát, és előírjuk, hogy a konténer aljához illeszkedjenek (align-items: flex-end).

<style>
.container {
   display: flex;
   height: 300px;
   justify-content: space-between;
   align-items: flex-end;
}

.item {width: 14%;}
.item-1 {height: 40%;}
.item-2 {height: 50%;}
.item-3 {height: 60%;}
.item-4 {height: 20%;}
.item-5 {height: 30%;}
</style>

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
  <div class="item item-4"></div>
  <div class="item item-5"></div>
</div>

Minta 8.

Most egy vízszintes oszlopdiagramot hozzunk létre. A dolgunk annyi, hogy a konténer főtengelyének irányát függőlegesre állítjuk (flex-direction: column), és értelemszerűen felcseréljük az elemek szélességét és magasságát.

Minta 9.

Rendezzük el az elemeket középen függőlegesen egymás alá. Ehhez csupán a főtengely irányát kell függőlegesre állítanunk (flex-direction: column).

Minta 10.

Az utolsó példában egy 3 oszlopos mozaik (masonry) elrendezés megvalósítását tűzzük ki célul. A kód kicsit bonyolultabb az eddig megszokottabbnál.

A container osztályunkban a főtengely irányát függőlegesre állítjuk, és előírjuk a sortörést (illetve oszloptörést) egy tulajdonságon belül (flex-flow: column wrap).

Következő lépésként megfelelő sorrendbe rakjuk az elemeket. Három csoportba soroljuk azokat (1,2 és 3), hiszen 3 oszlopunk van. Az egyes oszlopokon belül így egymás alatt jelennek meg az egymáshoz tartozók. (Hogy ezt lássuk, az egyes elemeket meg is sorszámoztuk a példában.)

Utolsóként az egyes oszlopok közötti elválasztó részt valósítsuk meg. Ehhez a konténerünk első és utolsó gyermekeként elhelyezünk egy-egy üres karaktert (content: “”) a container:after és container:before szelektorokkal. Beállítjuk, hogy 100% legyen a kiinduló méretük (flex-basis: 100%), 0 szélességük (width: 0), persze arányosan azért kapnak méretet a maradékból, és elhelyezzük őket a 2-es csoportban. Vagy ez a két elem a 2-es csoport első és utolsó gyermeke lesz, ezért jelennek majd meg a középső oszlop két oldalán.
Kész is vagyunk.