Pää- ja poikittaisakselit CSS-flexboxeissa

Flexboxeista voidaan puhua kahdella termillä: ensimmäinen on rivi tai sarake, toinen on akselien termein. Rivien ja sarakkeiden kanssa olemme jo selvittäneet asian, nyt käsitellään akseleita. Akselien ymmärtäminen on tarpeen, jotta elementtejä voidaan kohdistaa vaakasuoraan tai pystysuoraan.

Kun työskennellään flex-elementtien kanssa, on aina olemassa pääakseli ja poikittaisakseli. Voimme kohdistaa elementtejä pääakselin suuntaisesti ja poikittain pääakseliin nähden. Pääakselilla voi olla 4 suuntaa: vasemmalta oikealle, oikealta vasemmalle, ylhäältä alas ja alhaalta ylös.

Poikittaisakselin suunta riippuu pääakselin suunnasta: jos pääakseli on vaakasuora, niin poikittaisakseli on suunnattu ylhäältä alas, jos pääakseli on pystysuora, niin poikittaisakseli on suunnattu vasemmalta oikealle. Muita suuntia poikittaisakselilla ei voi olla.

Pääakselin suuntaa säädetään ominaisuudella flex-direction. Jos kyseisellä ominaisuudella on arvo row - pääakseli on suunnattu vasemmalta oikealle, jos arvo on row-reverse, niin oikealta vasemmalle. Arvo column suuntaa akselin ylhäältä alas, ja arvo column-reverse - alhaalta ylös.

Oletetaan, että pääakseli on vaakasuora. Minne suuntaan poikittaisakseli on suunnattu?

Oletetaan, että pääakseli on pystysuora. Minne suuntaan poikittaisakseli on suunnattu?

Oletetaan, että poikittaisakseli on suunnattu oikealle. Minne suuntaan pääakseli voi tällöin olla suunnattu?

Oletetaan, että poikittaisakseli on suunnattu alas. Minne suuntaan pääakseli voi tällöin olla suunnattu?

Voiko poikittaisakseli olla suunnattu oikealta vasemmalle?

Voiko poikittaisakseli olla suunnattu alhaalta ylös?

Oletetaan, että ominaisuudella flex-direction on arvo row. Minne suuntaan pääakseli on suunnattu? Minne suuntaan poikittaisakseli on suunnattu?

Oletetaan, että ominaisuudella flex-direction on arvo column. Minne suuntaan pääakseli on suunnattu? Minne suuntaan poikittaisakseli on suunnattu?

Oletetaan, että ominaisuudella flex-direction on arvo row-reverse. Minne suuntaan pääakseli on suunnattu? Minne suuntaan poikittaisakseli on suunnattu?

Oletetaan, että ominaisuudella flex-direction on arvo column-reverse. Minne suuntaan pääakseli on suunnattu? Minne suuntaan poikittaisakseli on suunnattu?