Blokk és Div elem

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). 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 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.

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.

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