Hány konténer legyen az oldalon?

A konténerekkel az oldal elemeit csoportosíthatod és együtt kezelheted: egyszerre módosíthatod több elem tulajdonságait, és gyorsan átalakíthatod az egész elrendezést. Konténert másik konténerbe is tehetsz, így összetett elrendezést építhetsz, és a kész részeket sablonként újra felhasználhatod.

A konténerek gyorsíthatják az oldal betöltését, a gyors oldal pedig jobb felhasználói élményt ad, és a keresők is előrébb sorolhatják. Ehhez viszont kevés konténerrel kell dolgoznod.

Építs takarékosan

Az első szempont az, hogy pontosan azt építsd meg, amit szeretnél. Ezen belül viszont használj a lehető legkevesebb konténert: minél több van belőlük, annál több elem kerül az oldal szerkezetébe (DOM), és annál lassabb az oldal.

Az oldal szerkezetét a böngésző hierarchikus csomópontokként (DOM) kezeli, nagyjából úgy, ahogy egy könyv címei és alcímei követik egymást. Ezt nem kell ismerned, de jó tudni: egy Flexbox konténer egyetlen csomópont, amelyből a böngésző könnyen és gyorsan megkapja a szükséges adatokat, ezért az oldal gyorsabban töltődik és jobban reagál.

Mikor kell új konténer?

Irány

A konténer iránya dönti el, hogy a benne lévő widgetek sorban vagy oszlopban követik egymást. Ha egyes elemeket sorba, másokat oszlopba kell rendezned, két külön konténer kell.

Példa: egy műgyűjtő oldalán a művek listája oszlopban áll, de minden mű képei egymás mellett, sorban. Ehhez egy oszlop irányú konténerbe egy sor irányú, beágyazott konténer kerül.

Kezelhetőség

Néha egyszerűbb külön konténert használni, mint megkerülő megoldást keresni. Ha például nagy hátterű hero szakaszt építesz, könnyebb, ha az saját konténer.

Design

Érdemes csoportba tenni azokat a widgeteket, amelyeknek közös a tulajdonságuk: ugyanaz a hátterük, rámutatás-hatásuk, szegélyük vagy görgetési hatásuk. Ilyenkor egyetlen konténerben egyszerre állíthatod be mindet.

Működés

Új konténert érdemes felvenni funkcionális okból is:

• A gyakran használt widgeteket egy konténerbe teheted, és sablonként elmentheted, majd a későbbi munkáidban újra felhasználhatod.
• Külön konténerbe teheted azokat a widgeteket, amelyeket csoportként akarsz mozgatni.
• Ha a konténer kattinthatóvá van téve, nem lehet benne másik kattintható elem, például gomb. Ilyenkor a gombnak külön konténer kell. Részletek: Kattintható konténer.

Reszponzivitás

Ha a konténereket töréspontonként külön kezeled, jobban szabályozhatod a reszponzív megjelenést, például azt, hogy az egyik konténer elemei a másiké előtt jelenjenek meg. Néha beágyazott konténerekre van szükség, hogy a widgetek minden képernyőméreten a megfelelő sorrendben álljanak.

Mikor nem kell?

Az elemeket konténerbe beágyazott konténer nélkül is felveheted. Ha egy beágyazott konténerben csak egyetlen elem van, nagy eséllyel nincs szükséged rá, töröld. A felesleges konténereket a Szerkezet ablakban találod meg.