# Blokk és Div elem

> A Blokk és a Div elem: mikor melyiket használd, az alapértékek különbségei és a sablonstílusokban módosítható alapbeállítások.

A **Blokk** és a **Div** a négy elrendezéselem másik két tagja (a **Szakasz** és a **Tároló** mellett, lásd [Szakasz és Tároló elem](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-szakasz-es-tarolo/)). Mindkettő ugyanazokat a beállításokat kínálja, mint a Tároló: rács- és flex-elrendezés, lekérdezési ciklus, link, egyéni HTML-címke, masonry. A teljes beállításlistát a [Szakasz és Tároló elem](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-szakasz-es-tarolo/) fejezet táblázatai tartalmazzák, itt csak a különbségeket olvashatod.

## Blokk

A **Blokk** ugyanazt az elrendezési vezérlést adja, mint a Tároló, de alapból **100% széles** a Tároló fix 1100 px-es szélessége helyett. Alapból `flex` megjelenítést használ.

Ott használd, ahol a rendelkezésre álló teljes szélességet ki kell tölteni:

- egy Tárolón belül oszlopos vagy soros elrendezéshez,
- többoszlopos elrendezésekhez és oldalsávokhoz,
- bárhol, ahol gyors hozzáférés kell az irányhoz és az igazításhoz.

Tipp: ha több egyforma széles oszlopot szeretnél, tegyél Blokkokat egy Tárolóba, és állítsd az irányt vízszintesre. A Blokkok automatikusan egyenlően osztják el a helyet.

Ha azt szeretnéd, hogy az elrendezéselem csak a tartalma méretét foglalja el, használj Divet.

![A Blokk elem beállításai a szerkesztőben](./kepek/elemek-5-block.webp)

*A Blokk elem beállításai a szerkesztőben* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a Blokk **HTML-címke** (`div`) és **Megjelenítés** (`flex`) mezője, majd a flex-beállítások (**Irány**, igazítások, **Rugalmas növekedés**) látszanak.

### Alapbeállítások a sablonstílusokban

A Blokk alapértékeit a **Sablonstílusok** között, az **Elem - Blokk** csoportban módosíthatod: `width`, `min-width`, `max-width`, `margin`, `padding`.

## Div

A **Div** a Bricks sima, stílus nélküli div eleme, a legáltalánosabb csoportosító és elrendező elem. Míg a Tároló 1100 px-es, a Blokk 100%-os szélességet ad, a Divnek semmilyen előre megadott értéke nincs.

Ezért ideális más elrendezéselemeken belül, mert a tartalmához igazodva nő és zsugorodik, és ott is jól jön, ahol csak Div-alapú, osztályokra épülő elrendezést építesz. Használd tartalom csoportosítására, egyedi elrendezésekhez, vagy ha teljes kontrollt szeretnél a stílus fölött, előre megadott tulajdonságok nélkül.

Tipp: a **HTML-címke** beállítással a Divet bármilyen szemantikus HTML-elemmé alakíthatod (`article`, `nav`, `ul`, `li`, `a` stb.), miközben az összes elrendezési és stílusbeállítás megmarad.

![A Div elem beállításai a szerkesztőben](./kepek/elemek-5-div.webp)

*A Div elem beállításai a szerkesztőben* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a Div **Lekérdezési ciklus** kapcsolója, a **HTML-címke** (`div`), a **Megjelenítés** (`block`) és a **Sorrend** mező látszik. A Divnél a megjelenítés alapértéke `block`, ezért a rács- és flex-beállítások csak akkor jelennek meg, ha átállítod `grid`-re vagy `flex`-re.

### Alapbeállítások a sablonstílusokban

A Div alapértékeit a **Sablonstílusok** között, az **Elem - Div** csoportban módosíthatod:

- `display`,
- `flex-direction`, `justify-content`, `align-items` (ha a megjelenítés `flex`),
- `width`, `min-width`, `max-width`,
- `margin`, `padding`.

## Különbségek röviden

| Elem | Alapszélesség | Alap megjelenítés | Mikor használd |
| --- | --- | --- | --- |
| Tároló | 1100 px, középre igazítva | flex | Legfelső szinten vagy Szakaszban |
| Blokk | 100% | flex | Oszlop vagy teljes szélességű csoport Tárolón belül |
| Div | nincs előre megadva | block | Általános csoportosítás, a tartalomhoz igazodó méret |