# A konténer Elrendezés fülének beállításai

> Szélesség, magasság, irány, igazítás, hézag, tördelés, túlcsordulás és HTML-címke a Flexbox konténeren.

A konténer **Elrendezés** füle azt szabályozza, hogyan rendeződnek el a konténerben lévő elemek. Jelöld ki a konténert a vásznon, és nyisd meg a **Tároló szerkesztése** panelt: három füle van, **Elrendezés**, **Stílus** és **Haladó**.

![A Tároló szerkesztése panel Elrendezés füle a Tároló szekcióval](./kepek/kontenerek-elrendezes-1.webp)

*A Tároló szerkesztése panel Elrendezés füle a Tároló szekcióval* (https://minta-bolt.hu/wp-admin/post.php?post=18&action=elementor)

A fenti kép a **Tároló** szekciót és a **Tételek** csoportot mutatja.

## Tároló szekció

### Konténerelrendezés

Itt választasz a **Flexbox** és a **Rács** között. A Rács beállításairól a [Rács konténer készítése](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-racs-letrehozasa/) fejezet szól.

### Tartalom szélessége

Azt dönti el, hogy a konténer tartalma **Dobozos** (korlátozott szélességű) vagy **Teljes szélesség** legyen. Melyiket válaszd?

| Ha ezt szeretnéd | Ezt használd |
|---|---|
| A konténer szélessége maradjon, de a benne lévő tartalom szélessége változzon | **Dobozos**, a tartalom szélességét a **Szélesség** mezővel állítod |
| A konténer szélessége változzon, a tartalom szélessége ne | **Teljes szélesség**, a konténer szélességét a **Szélesség** mezővel állítod |
| Mindkettő változzon | **Teljes szélesség**, a konténer szélességét a **Szélesség** mezővel, a tartalom szélességét a **Haladó** fül belső térközével (padding) állítod |

A **Tartalom szélessége** minden eszköznézetre külön beállítható.

### Szélesség

A konténer vagy a tartalom szélességét adod meg PX, % vagy VW egységben. A hatása a **Tartalom szélessége** értékétől függ:

- **Dobozos:** a konténeren belüli tartalom szélességét állítja. Új konténernél ez az alapérték.
- **Teljes szélesség:** magát a konténert szélesíti vagy keskenyíti.

Alapból mindkét típus kitölti a rendelkezésre álló helyet. Ha a konténer a legfelső szinten van, a teljes nézetablak szélességét foglalja el, ha pedig egy másik konténerbe van ágyazva, a szülő tartalmának teljes szélességét.

### Minimális magasság

A konténer tartalmának legkisebb magassága, csúszkával vagy beírt értékkel, PX vagy VH egységben. A 100 VH a nézetablak teljes magasságát jelenti. Ez is eszközönként állítható.

## Tételek

Ezek a beállítások a konténeren belüli összes elemre vonatkoznak.

### Irány

Az elrendezés legalapvetőbb beállítása. Négy lehetőséged van:

| Gomb | Hatás |
|---|---|
| Vízszintes sor | Az elemek egymás mellett állnak |
| Függőleges oszlop | Az elemek egymás alatt állnak |
| Fordított sor | Egymás mellett, fordított sorrendben |
| Fordított oszlop | Egymás alatt, fordított sorrendben |

### Tartalom igazítása

Az irány fő tengelye mentén igazítja az elemeket, és elosztja a konténerben maradó helyet. A lehetőségek: **Indítás**, **Középre**, **Vége**, **Térköz az elemek között**, **Egyenletes térköz az elemek körül** és **Egyenletes térköz**.

- **Indítás:** a tartalom a konténer kezdő széléhez igazodik.
- **Középre:** a tartalom a konténer közepére kerül.
- **Vége:** a tartalom a záró élhez igazodik.
- **Térköz az elemek között:** az első elem a kezdő, az utolsó a záró élhez kerül, a köztük lévő hely egyenlően oszlik el.
- **Egyenletes térköz az elemek körül:** minden elem körül egyenlő a hely, így a szélső elemek és a konténer széle között fele akkora a térköz, mint az elemek között.
- **Egyenletes térköz:** az elemek között, valamint az első előtt és az utolsó után is ugyanakkora a hely.

### Elemek igazítása

A mellék tengely mentén igazítja az elemeket. A lehetőségek: **Indítás**, **Középre**, **Vége** és **Nyújtott**. A **Nyújtott** csak azoknál az elemeknél hat, amelyeknek nincs megadott szélessége.

### Igazítások kombinálása

Általában a két igazítást együtt használod. Például vízszintes soros iránynál az **Elemek igazítása** legyen **Középre**, majd a **Tartalom igazítása** értékével oszd el az elemeket a kívánt módon.

### Hézagok

Az elemek közötti térköz, külön **Oszlop** és **Sor** értékkel (PX, % vagy VW). Összekapcsolhatod őket a lánc ikonnal. A hézag a margóhoz hasonlóan az elem „kívüli” helyét használja. Tördeléssel együtt a gyermek elemek szélességéből le kell vonni a hézagot: ha például két elemet 5%-os hézaggal szeretnél egy sorba tenni, 47,5% + 5% + 47,5% kell, mert az 50% + 50% mellé már nem fér hézag. Ha ez nem működik, használj helyette margót vagy belső térközt.

Az alapértelmezett elemhézag 20 PX; a webhely beállításai között, az elrendezés részben módosítható. Ez is eszközönként állítható.

### Tördelés

Ha a **Tördelés** be van kapcsolva, a megadott szélességű elemek több sorba törhetnek ahelyett, hogy egyetlen sorba szorulnának. Így egyetlen konténerben is lehet többsoros elrendezés. Például egy nagy címsor állhat több kisebb, egymás mellé tett elem fölött; ezt korábban beágyazott szakasszal oldottad meg, most egyetlen konténerrel is megy.

A **Nincs tördelés** az alapérték.

### Tartalom igazítása (tördelésnél)

Ez a második **Tartalom igazítása** mező csak bekapcsolt tördelésnél jelenik meg. A sorok közötti szabad helyet osztja el ugyanúgy, mint a fenti **Tartalom igazítása**, a lehetőségei: középre, kezdő, záró, térköz az elemek között, egyenletes térköz az elemek körül és egyenletes térköz.

![Az Elrendezés fül alja bekapcsolt tördeléssel és a megjelenő Tartalom igazítása mezővel](./kepek/kontenerek-elrendezes-tordeles.webp)

*Az Elrendezés fül alja bekapcsolt tördeléssel és a megjelenő Tartalom igazítása mezővel* (https://minta-bolt.hu/wp-admin/post.php?post=18&action=elementor)

A képen a **Tördelés** be van kapcsolva, ezért alatta megjelent a második **Tartalom igazítása** sor.

## További lehetőségek

![A További lehetőségek szekció Túlcsordulás és HTML-címke mezőkkel](./kepek/kontenerek-elrendezes-2.webp)

*A További lehetőségek szekció Túlcsordulás és HTML-címke mezőkkel* (https://minta-bolt.hu/wp-admin/post.php?post=18&action=elementor)

### Túlcsordulás

Azt szabályozza, mi történjen, ha a tartalom nem fér el a konténerben:

- **Alapértelmezett:** a tartalom kilóghat a konténerből.
- **Rejtett:** a túllógó rész rejtve marad, és nem érhető el.
- **Automatikus:** görgetősáv jelenik meg, így a tartalom elérhető marad. Mobil nézetben a tartalmon át lehet húzni az ujjaddal.

### HTML-címke

A listából kiválaszthatod a konténerhez leginkább illő HTML-címkét (például **div**, **header**, **main**, **section**). Az **a (hivatkozás)** címkével a konténer kattinthatóvá tehető. A címke a keresőmotorok számára is jelzi a tartalom szerepét, ezért a keresőoptimalizálás szempontjából fontos, főleg a magasabb szintű konténereknél. Ez is eszközönként állítható.