Flex-lohkojen tasaus poikittaisakselilla CSS:ssä

Kohdistetaan nyt lohkot myös poikittaisakselia pitkin. Tasaus tätä akselia pitkin asetetaan ominaisuudella align-items. Arvo flex-start painaa elementit akselin alkuun, ja arvo flex-end - loppuun.

Kokeillaan esimerkein.

Esimerkki

Ohjataan pääakseli vasemmalta oikealle. Tässä tapauksessa poikittaisakseli on suunnattu ylhäältä alas. Säädetään lohkojemme sijaintia sekä pääakselia että poikittaisakselia pitkin.

Pääakselia pitkin painetaan lohkot sen alkuun, eli vasempaan reunaan. Tätä varten justify-content asetetaan arvoon flex-start. Poikittaisakselia pitkin painetaan myös lohkot sen alkuun, eli yläreunaan. Tätä varten align-items asetetaan myös arvoon flex-start.

Katsotaan, mitä saamme:

css.parent {
  display: flex;
  flex-direction:  row;        /* pääakseli oikealle, poikittaisakseli alas */
  justify-content: flex-start; /* lohkot pääakselin alkuun */
  align-items:     flex-start; /* lohkot poikittaisakselin alkuun */
}

Koodin suorituksen tulos:

Esimerkki

Painetaan nyt lohkot poikittaisakselin loppuun, eli alareunaan. Tätä varten align-items asetetaan arvoon flex-end:

css.parent {
  display: flex;
  flex-direction:  row;        /* pääakseli oikealle, poikittaisakseli alas */
  justify-content: flex-start; /* lohkot pääakselin alkuun */
  align-items:     flex-end;   /* lohkot poikittaisakselin loppuun */
}

Koodin suorituksen tulos:

Esimerkki

Ohjataan nyt pääakseli ylhäältä alas. Koska pääakseli on pystysuora, poikittaisakseli tulee olemaan suunnattu oikealta vasemmalle. Painetaan lohkot molempia akseleita pitkin niiden alkuun:

css.parent {
  display: flex;
  flex-direction:  column;     /* pääakseli alas, poikittaisakseli oikealle */
  justify-content: flex-start; /* lohkot pääakselin alkuun */
  align-items:     flex-start; /* lohkot poikittaisakselin alkuun */
}

Koodin suorituksen tulos:

Esimerkki

Ja nyt poikittaisakselia pitkin painetaan lohkot sen loppuun:

css.parent {
  display: flex;
  flex-direction:  column;     /* pääakseli alas, poikittaisakseli oikealle */
  justify-content: flex-start; /* lohkot pääakselin alkuun */
  align-items:     flex-end;   /* lohkot poikittaisakselin loppuun */
}

Koodin suorituksen tulos:

Esimerkki

Painetaan lohkot molempien akselien loppuun:

css.parent {
  display: flex;
  flex-direction:  column;   /* pääakseli alas, poikittaisakseli oikealle */
  justify-content: flex-end; /* lohkot pääakselin loppuun */
  align-items:     flex-end; /* lohkot poikittaisakselin loppuun */
}

Koodin suorituksen tulos:

Esimerkki

Vaihdetaan pääakselin suuntaa - ohjataan se alhaalta ylös. Tällöin poikittaisakseli ei muuta suuntaansa, koska pääakseli on edelleen pystysuora.

Painetaan lohkot molempien akselien alkuun:

css.parent {
  display: flex;
  flex-direction:  column-reverse; /* pääakseli ylös, poikittaisakseli oikealle */
  justify-content: flex-start;     /* lohkot pääakselin alkuun */
  align-items:     flex-start;     /* lohkot poikittaisakselin alkuun */
}

Koodin suorituksen tulos: