Azonos elemek térköze egy konténerben

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. Általában minden képernyőmérethez külön kellene igazítani a tervet, de ezzel a módszerrel a legtöbb esetben elég egyetlen mobil töréspontot beállítani.

A feladathoz négy tulajdonságot használsz:

• a tartalom igazítását (Tartalom igazítása),
• a widget szélességét,
• az elemek közötti hézagot,
• a nézetablak szélességének változtatását az ellenőrzéshez.

A példában egy konténerben négy Ikondoboz widget áll, de beágyazott konténerekkel is ugyanígy működik (lásd Azonos elemek térköze beágyazott konténerekkel).

Az asztali nézet

1. A konténer Elrendezés fülén állítsd az Irány értékét sorra, a Tartalom igazítása mezőt pedig Térköz az elemek között értékre. Így egyenlő hely lesz a widgetek között.
2. Add meg a widgetek szélességét a Haladó fülön. Itt nem feltétlenül szükséges, mert minden widget azonos, de valós terveknél ez ritka. Állíts be egyéni szélességet, itt 15%-ot minden widgethez.
3. Térj vissza az Elrendezés fülre, és adj meg Hézagok értéket, hogy az elemek között 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.

Tipp: az első widget beállítása után kattints jobb gombbal a widget jobb felső sarkára, és válaszd a Másolás pontot. Egy másik widget jobb felső sarkán jobb gombbal a Stílus beillesztése pontot választva a widget átveszi az első beállításait, például a szélességet.

A 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. Ehhez állítsd mindegyik widget szélességét 40%-ra a Haladó fülön. Oszlopokra bontáskor érdemes olyan százalékot választani, amelyek összege kicsit 100% alatt van. Az elemek még nem biztos, hogy két oszlopba rendeződnek, ezt a tördelés beállítása oldja meg.
3. Jelöld ki a konténert.
4. Az Elrendezés fülön állítsd a Tartalom igazítása értékét Középre. Így az elemek széles táblagépen sem szóródnak szét.
5. 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.
6. Kapcsold be a Tördelést, hogy az elemek két oszlopba törjenek.
7. Lépj reszponzív módba, és válaszd a Mobil nézetet.
8. Állítsd a Hézagok értékét 70 px-re (a pontos érték a tervtől függ).
9. 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.