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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* pääakseli alhaalta ylös */
  justify-content: flex-end; /* lohkot pääakselin loppuun */
}

Koodin suorituksen tulos: