A CSS Flexbox elrendezés alapjai
A CSS Flexbox (Flexible Box Layout) egy olyan egydimenziós elrendezési modell, amely hatékony helyelosztást és igazítást tesz lehetővé a konténerekben lévő elemek között, még akkor is, ha azok mérete dinamikus vagy ismeretlen. A Flexbox használatával egyszerűen kezelhetők a korábban bonyolult pozicionálást igénylő feladatok, mint például az elemek függőleges középre igazítása, a sorközök egyenletes elosztása vagy az elemek sorrendjének vizuális megváltoztatása a HTML-struktúra módosítása nélkül.
A Flexbox működésének megértéséhez elengedhetetlen a főtengely (main axis) és a kereszttengely (cross axis) fogalmának ismerete. A főtengely iránya határozza meg, hogy az elemek egymás mellett vagy egymás alatt helyezkednek el, míg a kereszttengely erre merőlegesen fut. A tengelyek iránya nem rögzített; azt a konténeren beállított tulajdonságok határozzák meg, közvetlenül befolyásolva az igazítási szabályok működését.
A konténer tulajdonságainak beállítása
A Flexbox elrendezés alapja a szülő elem, azaz a flex konténer. A vizuális szerkesztőben a Konténer szekció alatt az alábbi tulajdonságok módosításával határozható meg a globális elrendezés:
- Irány (flex-direction): Megadja a főtengely irányát. Értéke lehet Sor (row), Sor fordított (row-reverse), Oszlop (column) vagy Oszlop fordított (column-reverse). Az irány megváltoztatása felcseréli a fő- és kereszttengelyt, ami alapvetően módosítja a többi igazítási szabály hatását.
- Tördelés (flex-wrap): Szabályozza, hogy az elemek egyetlen sorba kényszerüljenek-e, vagy több sorba léphessenek át. Opciói: Nincs tördelés (nowrap), Tördelés (wrap) és Fordított tördelés (wrap-reverse).
- Tartalom elrendezése (justify-content): Az elemek eloszlását szabályozza a főtengely mentén. Beállítható értékek: Elejére (flex-start), Végére (flex-end), Középre (center), Hely közé (space-between), Hely köré (space-around) és Egyenletesen (space-evenly).
- Elemek igazítása (align-items): Az elemek elhelyezkedését határozza meg a kereszttengely mentén az adott soron belül. Lehetséges értékei: Elejére (flex-start), Végére (flex-end), Középre (center), Nyújtás (stretch) és Bázisvonal (baseline).
- Tartalom igazítása (align-content): Többsoros elrendezés esetén határozza meg a sorok eloszlását a kereszttengely mentén. Csak akkor fejt ki hatást, ha a tördelés engedélyezve van, és az elemek több sorba rendeződnek. Értékei megegyeznek a főtengely igazítási opcióival: Elejére (flex-start), Végére (flex-end), Középre (center), Nyújtás (stretch), Hely közé (space-between), Hely köré (space-around) és Egyenletesen (space-evenly).
- Rés (gap): Egy numerikus érték, amely meghatározza a rács- vagy flexelemek közötti közvetlen távolságot, anélkül, hogy külső margókat (margin) kellene alkalmazni a szélső elemeken. A rés mérete mind a sorok, mind az oszlopok között érvényesül.
Az egyedi elemek testreszabása
A konténeren belüli gyermek elemek viselkedése egyenként is finomhangolható az Elemek szekcióban. Új elem hozzáadásakor (például az Elem hozzáadása gombra kattintva) a rendszer automatikusan létrehozza a következő elemet (például "Item 5"), amely azonnal megjelenik az élő előnézetben. Az elemek eltávolítására az Elem eltávolítása gomb szolgál.
Minden egyes kijelölt elemhez az alábbi egyedi tulajdonságok rendelhetők:
- Sorrend (order): Egy numerikus érték, amely meghatározza az elem vizuális sorrendjét a konténerben. Alapértelmezetten minden elem értéke 0, a kisebb vagy nagyobb számok megadásával az elem előrébb vagy hátrébb mozgatható a többihez képest.
- Növekedés (flex-grow): Egy számérték, amely azt adja meg, hogy az elem mekkora arányban részesüljön a konténeren belüli szabad helyből, ha az elemek alapméretükön felül növekedhetnek.
- Zsugorodás (flex-shrink): Egy számérték, amely meghatározza, hogy az elem milyen arányban zsugorodjon össze, ha a konténer mérete túl kicsi az összes elem befogadására.
- Bázis (flex-basis): Az elem kiindulási mérete a növekedési vagy zsugorodási kalkulációk előtt. Értéke lehet egy konkrét numerikus méret vagy Automatikus bázis.
- Egyéni igazítás (align-self): Lehetővé teszi az adott elem számára, hogy felülírja a szülő konténer által előírt
align-itemsszabályt. Opciói: Automatikus, Elejére (flex-start), Végére (flex-end), Középre (center), Nyújtás (stretch) és Bázisvonal (baseline).
A generált CSS kód optimalizált: csak azok az elemek kapnak saját CSS szabályt a kimenetben, amelyeknek a tulajdonságait a felhasználó manuálisan megváltoztatta az alapértelmezetthez képest.
Gyakori elrendezési minták megvalósítása
A Flexbox kiválóan alkalmas a modern webdesignban leggyakrabban előforduló elrendezések gyors felépítésére. Az alábbi minták közvetlenül konfigurálhatók a vizuális felületen az Előbeállítások segítségével:
| Elrendezés típusa | Főbb beállítások | Működési elv |
|---|---|---|
| Középre | justify-content: center; align-items: center; |
A konténer közepére igazítja a tartalmat mindkét tengelyen. |
| Navigációs sáv | justify-content: space-between; |
A logó, a menüpontok és a gombok egyenletesen oszlanak el a vízszintes vonalon. |
| Egymás alatt (Stack) | flex-direction: column; |
Az elemek függőlegesen, egymás alá rendeződnek, ideális űrlapokhoz vagy listákhoz. |
| Kártyák | flex-wrap: wrap; gap: [érték]; |
A kártyák egymás mellett helyezkednek el, majd a képernyő széléhez érve automatikusan új sorba törnek. |
| Oldalsáv | flex-direction: row; |
Egy rugalmas fő tartalom és egy fix vagy félig rugalmas oldalsáv egymás melletti elrendezése. |
Adatkezelés és biztonság
A Flexbox generátor használata során a teljes tervezési folyamat helyben történik. Az elrendezés közvetlenül a böngészőjében épül fel. Semmilyen beállítás nem kerül feltöltésre a BroBroGo szervereire, így a generált kódok és elrendezési struktúrák teljes mértékben a felhasználó eszközén maradnak.
A kész elrendezés kódja a CSS szekció alatt jelenik meg. A CSS másolása gombra kattintva a kód a vágólapra kerül, a gomb felirata pedig átmenetileg átvált a sikeres műveletet jelző állapotra.
Gyakran Ismételt Kérdések
Mi a különbség a justify-content és az align-items között?
A justify-content a főtengely mentén rendezi el az elemeket – amerre a sor vagy oszlop halad –, míg az align-items a kereszttengely mentén pozicionálja őket. Ha az irányt sorról oszlopra változtatja, a két tengely felcserélődik, így a justify-content fentről lefelé, az align-items pedig balról jobbra kezd el működni.
Hogyan működnek az elemenkénti beállítások?
Válasszon ki egy elemet a száma alapján, majd állítsa be, mennyire növekedjen (grow) a szabad hely kitöltéséhez, mennyire zsugorodjon (shrink) szűkös helyen, mi legyen a kiindulási mérete (basis), és hogyan igazodjon a kereszttengelyen. A sorrend (order) gombbal előrébb vagy hátrébb mozgathat egy elemet a képernyőn a HTML módosítása nélkül. Csak a ténylegesen megváltoztatott elemek kapnak saját szabályt a generált CSS-ben.
Mikor számít a wrap és az align-content?
Kikapcsolt tördelés (wrap) esetén minden elem egyetlen sorba kényszerül, és összenyomódhat. Ha bekapcsolja, a helyhiány miatt kiférő elemek a következő sorba kerülnek – ekkor lép működésbe az align-content, amely a sorok csoportját rendezi el. A rés (gap) margók nélkül határozza meg az elemek és a sorok közötti távolságot.