5.13 Flexbox

A Flexbox az utóbbi évek találmánya.

Mi az a Flexbox?

A CSS Flexbox egy modern lehetőség arra, hogy az elemeink elrendezését módosítsuk vele a képernyőnkön. Tulajdonképpen egy display érték, hasonlóan az inline-hoz, vagy a block-hoz.

Ennek a segítségével válik lehetségessé, hogy az elemeinket egy sorba vagy oszlopba rendezzük. Meghatározhatjuk a fő irányokat, az elemek térközeit, illetve azt is, hogy az elemek új sorba csússzanak-e, amennyiben már nem férnének ki, vagy pedig az elemek mérete csökkenjen, de azok maradjanak egy sorban.

A CSS Flexboot úgy hozzuk létre, hogy egy szülő elemnek a display:flex tulajdonságot adjuk. Minden közvetlen leszármazott elem ennek megfelelően fog rendeződni. Hozzuk létre az alábbi kódot, és nézzük meg a végeredményt:

<style>
  .flex-container {
    display: flex;
    background-color: #88ff17;
  }

  /* Maguk a flex elemek, melyeknek egy jellegzetes stílust definiáltunk az érhetőség kedvéért.*/
  .flex-container div {
    background-color: #aabbcc;
    margin: 13px;
    padding: 20px;
    font-size: 30px;
  }
</style>

<div class="flex-container">
  <div>Elem 1</div>
  <div>Elem 2</div>
  <div>Elem 3</div>
</div>

1. doboz
2. doboz
3. doboz

A display:flex elemhez még további egyéb tulajdonságot adhatunk. a legfontosabbak:

  • flex-direction - a rendezés iránya (függőleges, vízszintes)
  • flex-wrap
  • flex-flow -
  • justify-content
  • align-items -
  • align-content - tartalom igazítása

Kifejtem egy kicsit részletesebben .

Flex-direction

A flex-direction tulajdonképpen azt adja meg, hogy az elemeinknek a fő rendezési irányvonala mi legyen. Ez lehet sor, vagy oszlop, pontonsan négy különböző értéket definiálhatunk:

  • row
  • row-reverse
  • column
  • column-reverse

A row érték az alapértelmezett, ha nem definiáljuk ezt a tulajdonságokat, akkor automatikusan ez fog érvényesülni. Az elemek sorrendje a HTML kódunk (DOM) szerint fog megadódni. A row-reverse csupán annyiban különbözik ettől, hogy itt az elemek sorrendje fordítottja lesz, mint a HTML kódunké, és az elemek rendezése is jobbról kezdődik.

A column érték arra használható, hogy az elemeinket alapértelmezettként oszloposan rendezzük el, az elemek sorrendje a HTML elemeink sorrendje lesz. Amennyiben a column-reverse értéket használjuk, akkor az oszlopban az elemek sorrendje ennek fordítottjára fog adódni, valamint az elemek rendezése alulról kezdődik.

A további példákban csak azokat a stílus paramétereket változtatjuk meg, amelyek lényegesek::

<style>
.flex-container2 {
    display: flex;
    background-color: #88ff17;
   /*flex-direction: row;*/
    flex-direction: row-reverse;
   /*flex-direction: column;*/
   /*flex-direction: column-reverse;*/
}

.flex-container2 div {
    background-color: #aabbcc;
    margin: 13px;
    padding: 20px;
    font-size: 30px;
  }
</style>

<div class="flex-container2">
  <div>4. doboz</div>
  <div>5. doboz</div>
  <div>6. doboz</div>
</div>
4. doboz
5. doboz
6. doboz

 

Harmadik eset (column)

 

4. doboz
5. doboz
6. doboz

A flex-wrap

A flex-wrap tulajdonság azt hivatott meghatározni, hogy az elemeink abban az esetben, ha az aktuális képernyőméret nem engedné, új sorba/oszlopba rendeződjenek-e vagy pedig sem. Alapvetően három értéket adhatunk neki:

  • wrap
  • nowrap
  • wrap-reverse

A wrap azt jelenti, hogy az elemaink rendeződjenek új sorba/oszlopba, amennyiben azok eredeti mérete szerint nem férnének el. A nowrap ezzel ellentétben soha nem töri meg az elemeket, azok összecsúszni igyekeznek a padding, és margin értékek csökkentésével, egy idő után pedig még ki is lóghatnak az anyaelemből. Ez az alapértelmezett beállítás.

A wrap-reverse szintén engedi az elemeket új sorba rendeződni, de az ellentétes oldalra rendezi azokat: sor esetén az alapsor felé, oszlop esetén pedig bal oldalra. Nézzük meg mind a három lehetséges értéket:

<style>
.flex-container5 {
  display: flex;
  flex-wrap: wrap;
  /*flex-wrap: nowrap;*/
  /*flex-wrap: wrap-reverse;*/
  background-color: #75baff;
  max-width: 700px;
}

.flex-container5 div {
  background-color: #d9dadd;
  margin: 13px;
  padding: 20px;
  font-size: 30px;
}
</style>

<div class="flex-container5">
<div>1. doboz</div>
<div>2. doboz</div>
<div>3. doboz</div>
<div>4. doboz</div>
<div>5. doboz</div>
<div>6. doboz</div>
<div>7. doboz</div>
</div>
1. doboz
2. doboz
3. doboz
4. doboz
5. doboz
6. doboz
7. doboz

A második eset (nowrap)

1. doboz
2. doboz
3. doboz
4. doboz
5. doboz
6. doboz
7. doboz

 A harmadik eset (wrap-reverse)

1. doboz
2. doboz
3. doboz
4. doboz
5. doboz
6. doboz
7. doboz

 

 

Érdemes megjegyezni, hogy az eddig tárgyalt két tulajdonságot, a flex-directiont, és flex-wrapet egyetlen CSS propertyben is definiálhatjuk a flex-flow segítségével. Ha például a flex-direction:row, és flex-flow:wrap lenne, akkor mindezt úgy is definiálhatnánk, hogy flex-flow: row wrap;

Justify-content

A justify-content tulajdonság arra való, hogy meghatározzuk, hogy az elemeinket hogyan szeretnénk a flex-directionon belül rendezni. Az alábbi értékeket adhatjuk neki:

  • center
  • flex-start
  • flex-end
  • space-between
  • space-around

A center tulajdonképpen középre igyekszik igazítani az elemeinket. A flex-start az alapértelmezett, míg a flex-end az a flex irány végétől rendezi az elemeket. A space-between az elemeket a lehető legtávolabb igyekszik elrendezi egymástól, míg a space-around nagyjából igyekszik a meglevő térközt egyenlően elosztani. Próbáljuk ki a lehetséges opciókat:

  1. <style>
  2. .flex-container {
  3. display: flex;
  4. justify-content: center;
  5. /*justify-content: flex-start;*/
  6. /*justify-content: flex-end;*/
  7. /*justify-content: space-between;*/
  8. /*justify-content: space-around;*/
  9. background-color: #ff7417;
  10. }
  11.  
  12. /*Maguk az elemek, melyeknek egy jellegzetes stílust definiáltunk az érhetőség kedvéért.*/
  13. .flex-container div {
  14. background-color: #eeedeb;
  15. margin: 13px;
  16. padding: 20px;
  17. font-size: 30px;
  18. }
  19. </style>
  20.  
  21. <div class="flex-container">
  22. <div>Elem 1</div>
  23. <div>Elem 2</div>
  24. <div>Elem 3</div>
  25. </div>

Második eset (Flex-start)

Harmadik eset (flex-end)

Negyedik eset (space-between)

Ötödik eset (space-around)

Align-items

Az align-items property segítségével a második tengely mentén igazíthatjuk az elemeket: amennyiben a flex-direction row, akkor függőlegesen, amennyiben a flex-direction column, akkor vízszintesen. Az alábbi tulajdonságokat adhatjuk neki:

  • stretch
  • center
  • flex-start
  • flex-end

A stretch az alapértelmezett: amennyiben nem adunk meg a flex-elemek számára méretbeli kiterjedést, mondjuk szélességet, és magasságot, akkor automatikusan maximális méretűre veszi majd ezeket.

Az összes többi a flex elemet minimális méretűre veszi, a flex-start az alapértelmezett helyre állítja őket, a center középre, a flex-end pedig a végére. Nézzük meg a lehetséges opciókat az alábbi példán: a változatosság kedvéért a flex-directiont columnra állítottuk.

Második eset (center)

Harmadik eset (start)

Negyedik eset (end)

Align-content

Sokszor felmerülhet az az igény is, hogy amennyiben az elemeink több sorba rendeződnének, akkor azokat esztétikusan kellene megjelentetni, beállítva közöttük a megfelelő térközöket. Ez természetesen megtehető, lényegében a justify-content tulajdonságait használhatjuk, ezen kívül még a stretch-et, ami az alapértelmezettnek számít. A stretch szintén arra való, hogy amennyiben nem specifikáltuk le az elemeink méretét, akkor azok maximális méretet igyekeznek majd felvenni, kitöltve a lehetséges teret.

Értelemszerűen csak akkor értelmezhető, amennyiben a flex-wrap:wrap érték is be van állítva.

  1. <style>
  2. .flex-container {
  3. display: flex;
  4. flex-direction:column;
  5. align-items: stretch;
  6. /*align-items: center;*/
  7. /*align-items: stretch;*/
  8. /*align-items: flex-start;*/
  9. /*align-items: flex-end;*/
  10. background-color: #ff7417;
  11. height: 500px;
  12. }
  13.  
  14. /*Maguk az elemek, melyeknek egy jellegzetes stílust definiáltunk az érhetőség kedvéért.*/
  15. .flex-container div {
  16. background-color: #eeedeb;
  17. margin: 13px;
  18. padding: 20px;
  19. font-size: 30px;
  20. height: 50px;
  21. }
  22. </style>
  23.  
  24. <div class="flex-container">
  25. <div>Elem 1</div>
  26. <div>Elem 2</div>
  27. <div>Elem 3</div>
  28. </div>

Stretch eset:

Második eset (center)

Harmadik eset (flex-start)

Negyedik eset (flex-end)

Ötödik eset (space-between)

Hatodik eset (space-around)

 

A flex-itemek lehetséges tulajdonságai

Ezek az eddig definiált tulajdonságok mind a flex-containerre, vagyis az anyaelemre vonatkoztak. Természetesen felmerülhet annak az igénye is, hogy az egyes elemeknek speciális tulajdonságokat adjunk. Milyenekről lehetne szó?

Flex-grow

Ennek a segítségével azt állíthatjuk be, hogy a különféle elemeink méretaránya hogyan alakuljon. Egy példa lenne itt arra, hogy hogyan kellene ezt használni, a megadott számok arányában osztja fel a teljes hosszt.

  1. <style>
  2. .flex-container {
  3. display: flex;
  4. background-color: #ff7417;
  5. }
  6.  
  7. .flex-container div {
  8. background-color: #eeedeb;
  9. margin: 13px;
  10. padding: 20px;
  11. font-size: 30px;
  12. height: 50px;
  13. }
  14. .el_1 {
  15. flex-grow: 2;
  16. }
  17. .el_2 {
  18. flex-grow: 6;
  19. }
  20. .el_3 {
  21. flex-grow: 2;
  22. }
  23. </style>
  24. <div class="flex-container">
  25. <div class="el_1">Elem 1</div>
  26. <div class="el_2">Elem 2</div>
  27. <div class="el_3">Elem 3</div>
  28. </div>

Flex-order

A flex-order segítségével tulajdonképpen tetszőleges sorrendbe állíthatjuk az elemeinket a flex containeren belül. A flex-direction, és a HTML DOM elemeink határozzák meg az alapvető sorrendet, ennek a segítségével felülírhatjuk ezeket konvenciókat, amennyiben szeretnénk. Ez esetben a megfelelő CSS-t sorközi elemként definiáltuk.

Gyakori példák a flexbox alkalmazására

A fenti példákból azért érezhető, hogy mennyire jól használható manapság a CSS flexbox. Igen sok dolog meghatározására, és definiálására van lehetőség, ebből adódóan felmerülhet bennünk a kérdés: mi az, amit érdemes ebből megtanulnunk, illetve használnunk?

Nos, a válasz alapvetően az, hogy attól függ, hogy mennyire lenne rá szükségünk. Ha valaki kifejezetten frontend-fejlesztéssel foglalkozik, akkor gyakorlatilag minden, amit itt leírtunk, fontos lehet. A legfőbb problémák, melyekre például érdemes használni:

Egy elem középre igazítása

Mennyire sokszor előjön az a példa, amikor egy fejlesztés során egy elemet a teljes képernyő közepére, vagy pedig valamilyen elem közepére kellene helyezni. Ez az alábbi módon tehető meg: a flex-containernek adjuk a justify-content:center, és az align-items:center értékeket. Ebben az esetben, ha csupán egyetlen elemünk van, ami flex-item, akkor az középre fog igazodni.

  1. <style>
  2. .flex-container {
  3. display: flex;
  4. justify-content: center;
  5. align-items: center;
  6. background-color: #ff7417;
  7. height: 180px;
  8. }
  9.  
  10. .flex-container div {
  11. background-color: #eeedeb;
  12. padding: 10px;
  13. font-size: 20px;
  14. }
  15. </style>
  16. <div class="flex-container">
  17. <div>Középre igazítva</div>
  18. </div>

Egy oszlopba rendezés

Gyakori helyzet, hogy az elemeinket egy oszlopban kellene megjelenítenünk, középre igazítva. Ez természetesen megtehető lenne, az alábbi módon: az anyaelemnek kell adnunk a flex-direction: column valamint a align-items: center tulajdonságokat.

  1. <style>
  2. .flex-container {
  3. display: flex;
  4. flex-direction: column;
  5. align-items: center;
  6. background-color: #ff7417;
  7. height: 280px;
  8. }
  9.  
  10. .flex-container div {
  11. background-color: #eeedeb;
  12. padding: 10px;
  13. margin: 10px;
  14. font-size: 20px;
  15. }
  16. </style>
  17. <div class="flex-container">
  18. <div>Középre igazítva</div>
  19. <div>Középre igazítva</div>
  20. <div>Középre igazítva</div>
  21. <div>Középre igazítva</div>
  22. <div>Középre igazítva</div>
  23. </div>

Alsó lábléc kialakítása

Nagyon sok oldalon van úgynevezett alsó lábléc. Ennek a lényege, hogy jobb oldalt, és bal oldalt két rövid szöveg jelenik meg: mint ahogy ezen weboldal esetén is így van ez. Ez jellemzően a justify_content:space-between segítségével lehetséges. 

  1. <style>
  2. .flex-container {
  3. display: flex;
  4. justify-content: space-between;
  5. background-color: #ff7417;
  6. }
  7.  
  8. /*Maguk az elemek, melyeknek egy jellegzetes stílust definiáltunk az érhetőség kedvéért.*/
  9. .flex-container div {
  10. background-color: #eeedeb;
  11. margin: 13px;
  12. padding: 20px;
  13. font-size: 30px;
  14. }
  15. </style>
  16.  
  17. <div class="flex-container">
  18. <div>Elem 1</div>
  19. <div>Elem 2</div>
  20. </div>

Milyen a CSS Flexbox böngészőkompatibilitása?

Felmerülhet bennünk a kérdés, hogy vajon milyennek tekinthető a CSS Flexbox böngészőkompatbilitása? Mint tudjuk, a CSS nem egyformán böngészőkompatibilis: a különféle böngészők, és azok verziói között eltérhet némileg egy weboldal kinézete, de akár az is lehetséges, hogy bizonyos oldalak bizonyos esetekben egyáltalán nem is fognak működni. 

A Can I Use eszköz lehet arra alkalmas, hogy megvizsgáljuk, hogy a Flexbox mennyire böngészőkompatibilis. Ahogy láthatjuk, az esetek nagy részében nem lehet vele probléma, viszonylag jó kompatibilitású ilyen téren, viszont nem annyira, mint például a margin, vagy a padding: a legalapvetőbb CSS elemek. 

A CSS Flexbox működni fog az eseteket nagy részében a böngészőink alatt.

Összefoglalás

A CSS Flexbox egy nagyon jól, és könnyedén használható eszköz. Sok esetben úgy érezhetjük, hogy jól használható, habár időigényesebb lehet minden egyes alkalommal külön osztályokat létrheozni, és ezekre definiálni a tulajdonságokat. Amennyiben a projektünk Bootstrap 4 alatt fut, akkor érdemes lehet az alapból ismert Bootstrap flexbox osztályokat használni egy munka során.