CSS Flexbox igazítás
A Flexbox igazítási lehetőségei teszik igazán erőteljessé ezt a modellt. Segítségükkel szabályozhatjuk, hogy az elemek hogyan helyezkedjenek el a tartályban vízszintesen és függőlegesen.
Az igazítás alapjai
A Flexbox több beállítást biztosít az igazításhoz: justify-content, align-items, align-self és align-content. Ezek együtt lehetővé teszik a teljes kontrollt az elemek elrendezése felett.
| Tulajdonság | Leírás |
|---|---|
| justify-content | Az elemek vízszintes elosztása a fő tengely mentén. |
| align-items | Az elemek függőleges igazítása a kereszt tengely mentén. |
| align-self | Egy adott elem egyedi igazításának megadása. |
| align-content | Többsoros elrendezések függőleges igazítása. |
Gyakorlati példa
Az alábbi példában az elemek középre kerülnek vízszintesen, és az alsó részhez igazodnak függőlegesen.
A justify-content: center és az align-items: flex-end kombinációval az elemek középre kerülnek vízszintesen és az aljára függőlegesen.
Tippek a Flexbox igazításhoz
Az igazítási tulajdonságok segítenek pontosan elhelyezni az elemeket, így reszponzív és rugalmas elrendezéseket készíthetünk.
- A justify-content és align-items gyakran együtt használható harmonikus elrendezéshez.
- Az align-self lehetőséget ad egyetlen elem eltérő igazítására a többiektől.
- Az align-content csak akkor érvényesül, ha a flex tartály több sort tartalmaz.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
© 2025 ReadyTools. Minden jog fenntartva.