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

> A konténer alapelve: irány, igazítás, térköz, hézag, tördelés, szélesség, valamint az egyes elemek tulajdonságai.

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](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-globalis-elrendezes/)).

### 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](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-elrendezes-beallitasai/) 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](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-halado-beallitasai/) fejezet tartalmazza. A következő lépés a [konténer létrehozása](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-kontener-letrehozasa/).

## 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](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-ujrafelhasznalas/)).

A konténer létrehozásának lépéseit a [Flexbox konténer létrehozása](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-kontener-letrehozasa/) fejezet írja le.