Azonos elemek térköze beágyazott konténerekkel

Ha egy konténerben több, egyenletes térközű, azonos elem áll, a reszponzív megjelenésnél gond lehet: az elemek nem minden képernyőszélességnél rendeződnek úgy, ahogy szeretnéd. Ezzel a módszerrel sokkal kevesebb eszközönkénti testreszabás kell.

Az Ikondoboz widgetekkel megoldható változat a Flexbox konténerek működése fejezetben szerepel. Itt egy plusz dizájnelem, például elválasztó is kell, ezért ikondoboz helyett beágyazott konténereket használunk.

Az elrendezéshez ezeket a tulajdonságokat használjuk: tartalom igazítása, konténer szélessége, elemek közötti hézag, tördelés, elemméret és a nézetablak szélességének változtatása.

Az asztali nézet

Négy ikondoboz helyett négy beágyazott konténert veszel fel, és mindegyikbe további konténereket teszel. Ikon helyett képet használsz. A leírásban a legnagyobb a külső konténer, a benne lévő négy a középső konténer, a tartalmat ténylegesen hordozók pedig a belső konténerek.

A beágyazott konténerek az oldal sebességét nem rontják.

1. A külső konténer Elrendezés fülén állítsd az elemeket sorba, és a Tartalom igazítása legyen Térköz az elemek között. Így egyenlő hely lesz a középső konténerek között.
2. A középső konténerek Elrendezés fülén állítsd az elemeket oszlopba, a Tartalom igazítása itt is Térköz az elemek között.
3. Állíts be Hézagok értéket, hogy az elemek közt mindig maradjon hely. Elvileg a Térköz az elemek között ezt is biztosítja, de vannak szélsőséges esetek, amikor nem. Itt 5% jó érték, a tervtől függően általában 1 és 9% között.
4. Add meg a középső konténerek szélességét. Ebben a példában nem feltétlenül szükséges, mert minden konténer azonos, de a valós tervekben ez ritka. A Haladó fülön állíts be egyéni szélességet, itt 20%-ot.

Tipp: az első konténer beállítása után jobb gombbal kattints a konténer jobb felső sarkára, és válaszd a Másolás pontot. Egy másik konténer jobb felső sarkán jobb gombbal a Stílus beillesztése pontot választva a második konténer átveszi az első beállításait, például a szélességet. A menüt a Jobb gombos menük fejezet írja le.

Reszponzív beállítás

1. Lépj reszponzív módba, és válaszd a Táblagép nézetet.
2. Mind a négy elem látszik, de táblagépen jobban mutat a két oszlopos elrendezés. Állítsd a külső konténert Tördelés értékre, így a középső konténerek két oszlopba törnek.
3. A Tartalom igazítása legyen Középre, hogy az elemek széles táblagépen se szóródjanak szét.
4. Váltsd a Hézagok mértékegységét px-re, és állítsd 55 px-re. Táblagépen és mobilon a képpont jobban működik a hézagnál.
5. Állítsd a középső konténerek szélességét 40%-ra. Oszlopokra bontáskor érdemes olyan százalékot választani, amelyek összege kicsit 100% alatt van.
6. Válaszd a Mobil nézetet.
7. A középső konténerek Haladó fülén a Méret legyen Növekedés, így a konténerek a látogató telefonjának szélességétől függetlenül a legjobban töltik ki a helyet.
8. A nézetablak fogantyúival ellenőrizd az elrendezést, és szükség esetén finomíts.

A legtöbb esetben az elrendezés mobilon, még széles képernyős mobilon is jó lesz, így nem kell külön töréspontokat tervezni.