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.