Flex elemek igazítása a keresztirányú tengely mentén CSS-ben
Most igazítsuk az elemeket a keresztirányú tengely mentén is.
Az igazítás ezen a tengelyen a align-items tulajdonsággal vezérelhető.
A flex-start érték az elemeket a tengely elejéhez igazítja,
míg a flex-end érték a végéhez.
Próbáljuk ki példákon.
Példa
Állítsuk a főtengelyt balról jobbra. Ebben az esetben a keresztirányú tengely felülről lefelé fog haladni. Szabályozzuk az elemek elhelyezkedését mind a főtengely, mind a keresztirányú tengely mentén.
A főtengely mentén az elemeket a tengely elejéhez,
vagyis a bal széléhez igazítjuk. Ehhez a justify-content
tulajdonságot állítsuk flex-start értékre.
A keresztirányú tengely mentén szintén a tengely elejéhez,
vagyis a felső széléhez igazítjuk az elemeket. Ehhez a align-items
tulajdonságot is flex-start értékre állítjuk.
Nézzük meg, mit kapunk:
.parent {
display: flex;
flex-direction: row; /* főtengely jobbra, keresztirányú lefelé */
justify-content: flex-start; /* elemek a főtengely elejéhez */
align-items: flex-start; /* elemek a keresztirányú tengely elejéhez */
}
A kód végrehajtásának eredménye:
Példa
Most igazítsuk az elemeket a keresztirányú tengely végéhez,
vagyis az aljához. Ehhez a align-items tulajdonságot
állítsuk flex-end értékre:
.parent {
display: flex;
flex-direction: row; /* főtengely jobbra, keresztirányú lefelé */
justify-content: flex-start; /* elemek a főtengely elejéhez */
align-items: flex-end; /* elemek a keresztirányú tengely végéhez */
}
A kód végrehajtásának eredménye:
Példa
Most állítsuk a főtengelyt felülről lefelé. Mivel a főtengely függőleges, a keresztirányú tengely jobbról balra fog haladni. Igazítsuk az elemeket mindkét tengely mentén a kezdetükhöz:
.parent {
display: flex;
flex-direction: column; /* főtengely lefelé, keresztirányú jobbra */
justify-content: flex-start; /* elemek a főtengely elejéhez */
align-items: flex-start; /* elemek a keresztirányú tengely elejéhez */
}
A kód végrehajtásának eredménye:
Példa
Most a keresztirányú tengely mentén igazítsuk az elemeket a végéhez:
.parent {
display: flex;
flex-direction: column; /* főtengely lefelé, keresztirányú jobbra */
justify-content: flex-start; /* elemek a főtengely elejéhez */
align-items: flex-end; /* elemek a keresztirányú tengely végéhez */
}
A kód végrehajtásának eredménye:
Példa
Igazítsuk az elemeket mindkét tengely végéhez:
.parent {
display: flex;
flex-direction: column; /* főtengely lefelé, keresztirányú jobbra */
justify-content: flex-end; /* elemek a főtengely végéhez */
align-items: flex-end; /* elemek a keresztirányú tengely végéhez */
}
A kód végrehajtásának eredménye:
Példa
Változtassuk meg a főtengely irányát - állítsuk alulról felfelé. Ekkor a keresztirányú tengely iránya nem változik, mivel a főtengely továbbra is függőleges.
Igazítsuk az elemeket mindkét tengely elejéhez:
.parent {
display: flex;
flex-direction: column-reverse; /* főtengely felfelé, keresztirányú jobbra */
justify-content: flex-start; /* elemek a főtengely elejéhez */
align-items: flex-start; /* elemek a keresztirányú tengely elejéhez */
}
A kód végrehajtásának eredménye:
