A webfejlesztésben az elrendezés döntő szerepet játszik a tetszetős és felhasználóbarát weboldalak kialakításában. Az elrendezés egyik gyakran használt eszköze a Flexbox , amely lehetővé teszi az elemek rugalmas és reszponzív elrendezését. Az elemek közötti távolságtartás azonban gyakran szükséges az áttekinthető és kellemes struktúra kialakításához. Itt jön a képbe a CSS gap tulajdonsága , amely elegáns megoldást kínál a távolságtartás problémájára, különösen a flexbox elrendezésekben. Ebben a bemutatóban megmutatom, hogyan használhatja hatékonyan a gap tulajdonságot.
A legfontosabb megállapítások
- A gap tulajdonság lehetővé teszi, hogy meghatározza a gyermekelemek közötti távolságot egy flex konténerben.
- A gap egyszerűbb és hatékonyabb, mint a margin használata.
- A gap tulajdonságot a konténerelemek kitöltési értékeitől függetlenül is használhatja a tiszta elrendezés elérése érdekében.
Lépésről lépésre útmutató
1. Hozzon létre egy alapvető flexbox elrendezést
Először is létre kell hoznia egy egyszerű flexbox elrendezést három elemmel. Határozza meg a konténert, és állítsa be a display: flex; értéket a Flexbox aktiválásához.
Itt van a három rugalmas dobozunk sorba rendezve. Az első és a harmadik elem alapmérete megegyezik, míg a középső elem a rendelkezésre álló helyet foglalja el.
2. Aktiváljuk a flex-grow-t a középső elemhez.
Annak érdekében, hogy a középső elem több helyet foglaljon el, ennek az elemnek a flex-grow tulajdonságát 1-re állítjuk, míg a másik két elem alapmérete 100.
Ha most megváltoztatjuk az elrendezés szélességét, látni fogjuk, hogy a középső elem alkalmazkodik, míg a külső elemek állandóak maradnak.
3. Adjunk hozzá távolságot az elemek között
A dobozaink között jelenleg nincs távolságtartás. Ahhoz, hogy tetszetősen nézzen ki, szeretnénk távolságot hozzáadni az elemek között. Használhatnánk margót, de ez gyorsan problémákhoz vezet, különösen az utolsó elem kezelésénél.
Itt az lenne a szokásos, ha minden dobozra 8px-es margin-right értéket alkalmaznánk. Sajnos ez azt eredményezi, hogy az utolsó elem is extra távolságot kap.
4. Az utolsó elem margójának kiküszöbölése
Ha minden elemnél margin-right értéket használ, akkor az utolsó elemnél vissza kell állítani 0-ra, ami nehézkes lehet. Ezért nem optimális az a megközelítés, hogy a margóval együtt állítjuk be a távolságot.
Ezen a ponton világossá válik, hogy a gap használata sokkal elegánsabb.
5. A gap tulajdonság bevezetése
A fent leírt helyzet javítására használhatjuk a gap tulajdonságot. Állítsa be a gap: 8px; értéket a flex konténeréhez. Ez az egyszerű CSS automatikusan létrehozza a kívánt rést a gyermekelemek között.
A gap előnye, hogy nem kell többé az utolsó elem margóit kezelni. A távolságot mindenhol egyenletesen alkalmazza.
6. Padding hozzáadása
Az elemek közötti távolságon túlmenően érdemes egy külső távolságot is definiálni a konténer körül. Ehhez használhatod a kitöltést (padding).
Ha padding: 10px; értéket használ, akkor egyenletes távolságot kap az egész flexbox körül.
7 Az elrendezés tesztelése
Most, hogy meghatározta a gap és a padding értékeket, tesztelje az elrendezést a konténer szélességének megváltoztatásával. Látni fogja, hogy az elemek közötti távolság állandó marad, függetlenül a konténer méretétől.
Az elrendezés most már jól strukturált és vizuálisan tetszetős.
8 A fejlesztői eszközök használata
A távolságok megértéséhez és vizuális megjelenítéséhez hasznos lehet a böngésző fejlesztői eszközeinek használata. Itt megtekintheti a hézagbeállításokat, és meggyőződhet róla, hogy minden az elvárásoknak megfelelően működik.
Ha a flex konténer fölé viszi a pendrive-ot, akkor láthatja az árnyékolt területeket, amelyek a gap tulajdonságon keresztül a távolságot jelölik.
Összefoglaló
A flexbox elrendezésekben a gap tulajdonság lehetővé teszi, hogy elegánsan és hatékonyan tervezze meg a gyermekelemek közötti távolságot anélkül, hogy nehézkes margószabályokhoz kellene folyamodnia. Használata segít a tiszta és rendezett elrendezés biztosításában.
