Flexbox CSS-ben és HTML-ben: Utasítások az igazításhoz a főtengelyben

Ebben az útmutatóban megtanulja, hogyan használhatja a Flexboxot a flex konténer elemeinek a fő tengely mentén történő igazítására. A keresztirányú tengely mentén történő igazítással már foglalkoztunk, de a főtengely ugyanolyan fontos. A Flexbox technológia számos lehetőséget kínál arra, hogy az elemek igazítását rugalmasan és testre szabhatóan alakíthassa ki. Nézzük meg közelebbről!

A legfontosabb megállapítások

• A főtengelyen való igazítás a justify-content tulajdonsággal történik.
• Az elrendezés testreszabásához különböző értékeket használhat, mint például a center, flex-start, flex-end, space-between és space-around.
• A flexbox beállítások közvetlen hatással vannak az elemek kívánt irányú elrendezésére.

Lépésről-lépésre útmutató

1. A flex konténer inicializálása

Kezdje egy flex konténer létrehozásával és a flex irányának beállításával. Ebben a példában a flex irányt sorra állítjuk. Ez azt jelenti, hogy az elemek balról jobbra sorban lesznek elrendezve.

2. Az elemek alapértelmezett igazítása

Ha az elemeket különösebb stílusbeállítások nélkül helyezi el a konténerben, akkor látni fogja, hogy azok alapértelmezés szerint a konténer tetejére vannak igazítva. Ennek szemléltetésére 100 pixeles szélességet adhat nekik.

3. centrikus igazítás

Az elemek középre igazításához használja a justify-content CSS-tulajdonságot a center értékkel. Ez az elemeket a konténer közepére igazítja, ami nagyon tetszetős elrendezést eredményez.

4. Az elemek igazítása a végén

Ha az elemeket a konténer végére szeretné igazítani, használhatja a justify-content flex-end értékét. Ezáltal az elemek a konténer jobb végére kerülnek.

5. elemek igazítása induláskor

Az alapértelmezett viselkedés testreszabás nélkül a flex-start, ami azt jelenti, hogy az elemek a konténer elején maradnak. Ez a beállítás akkor hasznos, ha az elemek áttekinthető, rendezett elrendezését szeretné a konténer tetején.

6. flex irányának módosítása

Ha a flex irányát oszlopra változtatja, a főtengely vízszintesről függőlegesre változik. Ez azt jelenti, hogy az elemek mostantól felülről lefelé rendeződnek.

7. Az elemek függőleges elrendezésben történő központosítása

Az elemeket ebben az új igazításban a justify-content: centre használatával központosíthatja is. Ez a beállítás biztosítja, hogy minden elem a konténer közepén jelenjen meg.

8. Alulra igazítás

Ha azt szeretné, hogy az elemek a konténer alján legyenek, akkor ismét beállíthatja a flex-end beállítást. Ez az elemeket a konténer aljára pozícionálja.

9. A térköz tulajdonságok használata

A Flexbox lehetővé teszi az elemek közötti tér szabályozását is a space-between, space-around és space-evenly tulajdonságok használatával. Ezek a tulajdonságok különböző módon osztják el a rendelkezésre álló helyet.

10. A space-between használata

A justify-content: space-between használatával az első elem a konténer tetején, az utolsó elem pedig az alján marad, az elemek közötti tér pedig egyenletesen oszlik el.

11. Próbálja ki a space-around-ot

A space-around használatával minden elem körül ugyanannyi hely keletkezik. Ez a tér a konténer közepén látható, miközben az elemek egyenletesen elosztva maradnak.

12. Használja a space-evenly

A space-evenly használata biztosítja, hogy az elemek és a konténer széle között mindenhol egyenlő tér legyen.

Összefoglaló

Ebben az útmutatóban megtanulta, hogyan állíthatja be az igazítást a főtengelyben a Flexbox segítségével. A justify-content használatával nagyon rugalmasan alakíthatja ki az elemek pozicionálását. Emellett megismerkedett különböző tulajdonságokkal, amelyek segítenek a kívánt elrendezés elérésében. Használja fel ezt a tudást, hogy tetszetős és felhasználóbarát terveket hozzon létre!