A Flexbox konténerek működése

A konténer egy doboz, amely az oldal elemeit tartja: widgeteket és más, beágyazott konténereket. Így építed fel a kívánt elrendezést. A konténereket gyorsan elkészítheted, és visszatérő sablonokként is elmentheted.

A widgetek mellett konténert is helyezhetsz egy másik (szülő) konténerbe. Ezt beágyazott konténernek hívjuk.

Az elemek elrendezése a konténerben

A konténerben lévő elemeknek kétféle tulajdonsága van: hogyan viselkednek csoportként, és hogyan viselkednek külön-külön. A csoportos tulajdonságokat az Elrendezés fülön állítod.

Irány

Az irány négy értéke:

• Sor: az elemek balról jobbra, egymás mellett.
• Oszlop: az elemek fentről lefelé, egymás alatt.
• Fordított sor
• Fordított oszlop

Igazítás

Az igazítás azt szabályozza, hogyan helyezkednek el az elemek a konténerben, és attól függ, hogy az irány sor vagy oszlop. Soros irány esetén az elemek a konténer tetejére, közepére vagy aljára kerülnek. Oszlopos irány esetén balra, középre vagy jobbra.

Elosztás

Az elosztás meghatározza az elemek közötti térközt, és azt is, hogy milyen távol vannak a konténer szélétől.

Elemek hézaga

Az elemek közötti térköz. Alapértéke 20 PX, amit a Webhely beállításai Elrendezés részén módosíthatsz (lásd Globális elrendezési beállítások).

Tördelés

Eldönti, hogy egy sor vagy oszlop minden eleme egy vonalra kényszerül, vagy további sorokba, oszlopokba túlcsordulhat. Így az összes tartalom a konténer határain belül marad.

Konténer szélessége

Két értéke van: Dobozos és Teljes szélesség.

Dobozos	Teljes szélesség
A konténeren belüli tartalom arányát megtartja. Átméretezéskor a doboz a tartalom arányához igazodik.	Az arányt megtartja, de a szélessége a konténer bal és jobb határához illeszkedik. Ha a magasságot a tartalom alá csökkented, a tartalom a felső és alsó határon túlcsordul, a bal és jobb oldalon nem.

A beállítások részletei az Elrendezés fül fejezetben vannak.

Az elemek elrendezésének módosítása

1. Válaszd a konténer szerkesztését a fülről, vagy kattints a konténerre jobb gombbal.
2. Nyisd meg az Elrendezés fület.
3. Módosítsd a kívánt tulajdonságokat.

Az elemek hozzáadása után is módosíthatod, hogy lásd a hatásukat.

Az egyes elemek tulajdonságai

A konténer elemeit külön-külön is beállíthatod:

Tulajdonság	Mit csinál
Saját elem igazítása	Soros iránynál az elem a tetejére, közepére vagy aljára kerül, oszlopos iránynál balra, középre vagy jobbra. A Nyújtás az elemet a teljes sor vagy oszlop méretére kinyújtja.
Sorrend	Megadhatod, hogy egy elem az első vagy az utolsó legyen a sorban vagy oszlopban, vagy számot adhatsz meg. Reszponzív tervezésnél hasznos, mert eszközméretenként más sorrendben jelenhetnek meg az elemek.
Méret	Meghatározza, hogyan nő vagy zsugorodik az elem a konténer többi eleméhez képest.

Ezek a tulajdonságok a konténer Haladó fülén is megtalálhatók, mert a beágyazott konténerek a widgetekhez hasonlóan szerkeszthetők.

Az elem tulajdonságainak módosítása

1. Jelöld ki a vásznon a módosítandó elemet.
2. Nyisd meg a Haladó fület.
3. Módosítsd a kívánt tulajdonságokat.

A Haladó fül részleteit a Haladó fül beállításai fejezet tartalmazza. A következő lépés a konténer létrehozása.

Mi az a konténer, és miért jó?

A konténer váltotta fel az Elementorban a szakaszok, oszlopok és belső szakaszok régi rendszerét. Összetettebb oldalelrendezéseket készíthetsz vele, és gyorsabban is tervezhetsz. A konténer tartalmazza az oldal többi elemét: a widgeteket és más konténereket. A konténerbe tett konténert beágyazott vagy gyermek konténernek hívjuk.

A konténereknek két típusa van: a Rács konténer szimmetrikus, sorokból és oszlopokból álló elrendezés, a Flexbox konténer aszimmetrikus elrendezésekhez való.

• Jobb oldalteljesítmény: a konténer csak egy burkolóelemet használ, a szakasz és az oszlop kettőt. Ezzel csökken a DOM (dokumentumszerkezet) mérete, ami megfelelő kialakítással gyorsabbá teheti az oldalt.
• Nagyobb tervezési szabadság: a gyermek konténer beágyazásával jobban szabályozhatod a widgetek irányát, igazítását, sorrendjét, hosszát és helyét, és nem kell extra szakaszokat, oszlopokat felvenned.
• Rugalmas weboldal: az elemek sorrendje könnyebben igazodik a különböző képernyőméretekhez, így minden eszközön a megfelelő sorrendben jelennek meg.
• Újrafelhasználhatóság: a több elemet tartalmazó konténert sablonként elmentheted, és később újra használhatod (Konténerek újrafelhasználása).

A konténer létrehozásának lépéseit a Flexbox konténer létrehozása fejezet írja le.