Flex elemek igazítása a főtengely mentén CSS-ben
A justify-content tulajdonság
lehetővé teszi az elemek igazítását a főtengely mentén. Korábban
már megismerkedtél a center,
space-between, space-around,
space-evenly értékekkel.
Most pedig tanulmányozzunk meg néhány további értéket.
A flex-start érték az elemeket a főtengely
elejéhez igazítja, a flex-end érték pedig a végéhez.
Nézzük meg ezeket példákon keresztül.
Példa
Állítsuk a főtengelyt balról jobbra irányúra a
flex-direction tulajdonság row értékre
állításával.
Igazítsuk a blokkokat a tengely elejéhez. Ehhez a justify-content
tulajdonságot állítsuk flex-start értékre:
.parent {
display: flex;
flex-direction: row; /* főtengely balról jobbra */
justify-content: flex-start; /* blokkok a főtengely elejéhez */
}
A kód végrehajtásának eredménye:
Példa
Most igazítsuk a blokkokat a tengely végéhez.
Ehhez a justify-content tulajdonságot
állítsuk flex-end értékre:
.parent {
display: flex;
flex-direction: row; /* főtengely balról jobbra */
justify-content: flex-end; /* blokkok a főtengely végéhez */
}
A kód végrehajtásának eredménye:
Példa
Most állítsuk a főtengelyt jobbról balra irányúra
a flex-direction tulajdonság
row-reverse értékre állításával.
Igazítsuk a blokkokat a tengely elejéhez, vagyis a jobb széléhez.
Ehhez a justify-content
tulajdonságot állítsuk flex-start értékre:
.parent {
display: flex;
flex-direction: row-reverse; /* főtengely jobbról balra */
justify-content: flex-start; /* blokkok a főtengely elejéhez */
}
A kód végrehajtásának eredménye:
Példa
Most pedig igazítsuk a blokkokat a főtengely
végéhez, vagyis a bal széléhez. Ehhez a justify-content
tulajdonságot állítsuk flex-end értékre:
.parent {
display: flex;
flex-direction: row-reverse; /* főtengely jobbról balra */
justify-content: flex-end; /* blokkok a főtengely végéhez */
}
A kód végrehajtásának eredménye:
Példa
Az előző példákban a főtengely vízszintes volt. Most fordítsuk meg és állítsuk függőleges irányúra.
Állítsuk a főtengelyt lefelé irányúnak a
flex-direction tulajdonság
column értékre állításával.
Igazítsuk a blokkokat a főtengely elejéhez, vagyis
a felső széléhez. Ehhez a justify-content
tulajdonságot állítsuk flex-start értékre:
.parent {
display: flex;
flex-direction: column; /* főtengely fentről lefelé */
justify-content: flex-start; /* blokkok a főtengely elejéhez */
}
A kód végrehajtásának eredménye:
Példa
Most igazítsuk a blokkokat a főtengely
végéhez, vagyis az alsó széléhez. Ehhez a justify-content
tulajdonságot állítsuk flex-end értékre:
.parent {
display: flex;
flex-direction: column; /* főtengely fentről lefelé */
justify-content: flex-end; /* blokkok a főtengely végéhez */
}
A kód végrehajtásának eredménye:
Példa
Fordítsuk meg a főtengelyt, állítsuk alulról
felfelé irányúnak. Ehhez a flex-direction
tulajdonságot állítsuk column-reverse értékre.
Ebben az esetben a blokkok megváltoztatják a sorrendjüket -
a tengely elején a HTML
kódban utolsó blokk fog állni.
Igazítsuk a blokkokat a főtengely elejéhez,
vagyis az alsó széléhez. Ehhez a justify-content
tulajdonságot állítsuk flex-start értékre:
.parent {
display: flex;
flex-direction: column-reverse; /* főtengely alulról felfelé */
justify-content: flex-start; /* blokkok a főtengely elejéhez */
}
A kód végrehajtásának eredménye:
Példa
Most igazítsuk a blokkokat a főtengely végéhez,
vagyis a felső széléhez. Ehhez a justify-content
tulajdonságot állítsuk flex-end értékre:
.parent {
display: flex;
flex-direction: column-reverse; /* főtengely alulról felfelé */
justify-content: flex-end; /* blokkok a főtengely végéhez */
}
A kód végrehajtásának eredménye:
