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.