Flex-elementien tasaus pääakselilla CSS:ssä
Ominaisuus justify-content mahdollistaa
elementtien kohdentamisen pääakselia pitkin. Aikaisemmin
olet jo käsitellyt arvoja center,
space-between, space-around,
space-evenly. Tutkitaan nyt
muutamaa muuta arvoa.
Arvo flex-start painaa elementit
pääakselin alkuun, ja arvo flex-end - loppuun.
Katsotaan esimerkein.
Esimerkki
Ohjataan pääakseli vasemmalta oikealle asettamalla
ominaisuudelle flex-direction arvo row.
Painetaan lohkot akselin alkuun. Tätä varten justify-content
asetetaan arvoon flex-start:
.parent {
display: flex;
flex-direction: row; /* pääakseli vasemmalta oikealle */
justify-content: flex-start; /* lohkot pääakselin alkuun */
}
Koodin suorituksen tulos:
Esimerkki
Painetaan nyt lohkot akselin loppuun.
Tätä varten justify-content asetetaan
arvoon flex-end:
.parent {
display: flex;
flex-direction: row; /* pääakseli vasemmalta oikealle */
justify-content: flex-end; /* lohkot pääakselin loppuun */
}
Koodin suorituksen tulos:
Esimerkki
Ohjataan nyt pääakseli oikealta vasemmalle
asettaen ominaisuudelle flex-direction arvo
row-reverse. Painetaan lohkot akselin
alkuun, eli oikeaan reunaan. Tätä varten justify-content
asetetaan arvoon flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* pääakseli oikealta vasemmalle */
justify-content: flex-start; /* lohkot pääakselin alkuun */
}
Koodin suorituksen tulos:
Esimerkki
Painetaan nyt lohkot pääakselin
loppuun, eli vasempaan reunaan. Tätä varten justify-content
asetetaan arvoon flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* pääakseli oikealta vasemmalle */
justify-content: flex-end; /* lohkot pääakselin loppuun */
}
Koodin suorituksen tulos:
Esimerkki
Edellisissä esimerkeissä pääakseli oli suunnattu vaakasuoraan. Käännetään nyt se ja suunnataan pystysuoraan.
Ohjataan pääakseli alaspäin asettamalla
ominaisuudelle flex-direction arvo
column.
Painetaan lohkot pääakselin alkuun, eli
yläreunaan. Tätä varten justify-content
asetetaan arvoon flex-start:
.parent {
display: flex;
flex-direction: column; /* pääakseli ylhäältä alas */
justify-content: flex-start; /* lohkot pääakselin alkuun */
}
Koodin suorituksen tulos:
Esimerkki
Painetaan nyt lohkot pääakselin
loppuun, eli alareunaan. Tätä varten justify-content
asetetaan arvoon flex-end:
.parent {
display: flex;
flex-direction: column; /* pääakseli ylhäältä alas */
justify-content: flex-end; /* lohkot pääakselin loppuun */
}
Koodin suorituksen tulos:
Esimerkki
Käännetään pääakseli suuntaamalla se alhaalta
ylös. Tätä varten ominaisuudelle flex-direction
annetaan arvo column-reverse.
Tässä tapauksessa lohkot vaihtavat järjestystään -
akselin alussa on HTML-koodissa
viimeisenä oleva lohko.
Painetaan lohkot pääakselin alkuun,
eli alareunaan. Tätä varten justify-content
asetetaan arvoon flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* pääakseli alhaalta ylös */
justify-content: flex-start; /* lohkot pääakselin alkuun */
}
Koodin suorituksen tulos:
Esimerkki
Painetaan lohkot pääakselin loppuun,
eli yläreunaan. Tätä varten justify-content
asetetaan arvoon flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* pääakseli alhaalta ylös */
justify-content: flex-end; /* lohkot pääakselin loppuun */
}
Koodin suorituksen tulos:
