Flex elemek igazítása a keresztirányú tengely mentén CSS-ben

Most igazítsuk az elemeket a keresztirányú tengely mentén is. Az igazítás ezen a tengelyen a align-items tulajdonsággal vezérelhető. A flex-start érték az elemeket a tengely elejéhez igazítja, míg a flex-end érték a végéhez.

Próbáljuk ki példákon.

Példa

Állítsuk a főtengelyt balról jobbra. Ebben az esetben a keresztirányú tengely felülről lefelé fog haladni. Szabályozzuk az elemek elhelyezkedését mind a főtengely, mind a keresztirányú tengely mentén.

A főtengely mentén az elemeket a tengely elejéhez, vagyis a bal széléhez igazítjuk. Ehhez a justify-content tulajdonságot állítsuk flex-start értékre. A keresztirányú tengely mentén szintén a tengely elejéhez, vagyis a felső széléhez igazítjuk az elemeket. Ehhez a align-items tulajdonságot is flex-start értékre állítjuk.

Nézzük meg, mit kapunk:

css.parent {
  display: flex;
  flex-direction:  row;        /* főtengely jobbra, keresztirányú lefelé */
  justify-content: flex-start; /* elemek a főtengely elejéhez */
  align-items:     flex-start; /* elemek a keresztirányú tengely elejéhez */
}

A kód végrehajtásának eredménye:

Példa

Most igazítsuk az elemeket a keresztirányú tengely végéhez, vagyis az aljához. Ehhez a align-items tulajdonságot állítsuk flex-end értékre:

css.parent {
  display: flex;
  flex-direction:  row;        /* főtengely jobbra, keresztirányú lefelé */
  justify-content: flex-start; /* elemek a főtengely elejéhez */
  align-items:     flex-end;   /* elemek a keresztirányú tengely végéhez */
}

A kód végrehajtásának eredménye:

Példa

Most állítsuk a főtengelyt felülről lefelé. Mivel a főtengely függőleges, a keresztirányú tengely jobbról balra fog haladni. Igazítsuk az elemeket mindkét tengely mentén a kezdetükhöz:

css.parent {
  display: flex;
  flex-direction:  column;     /* főtengely lefelé, keresztirányú jobbra */
  justify-content: flex-start; /* elemek a főtengely elejéhez */
  align-items:     flex-start; /* elemek a keresztirányú tengely elejéhez */
}

A kód végrehajtásának eredménye:

Példa

Most a keresztirányú tengely mentén igazítsuk az elemeket a végéhez:

css.parent {
  display: flex;
  flex-direction:  column;     /* főtengely lefelé, keresztirányú jobbra */
  justify-content: flex-start; /* elemek a főtengely elejéhez */
  align-items:     flex-end;   /* elemek a keresztirányú tengely végéhez */
}

A kód végrehajtásának eredménye:

Példa

Igazítsuk az elemeket mindkét tengely végéhez:

css.parent {
  display: flex;
  flex-direction:  column;   /* főtengely lefelé, keresztirányú jobbra */
  justify-content: flex-end; /* elemek a főtengely végéhez */
  align-items:     flex-end; /* elemek a keresztirányú tengely végéhez */
}

A kód végrehajtásának eredménye:

Példa

Változtassuk meg a főtengely irányát - állítsuk alulról felfelé. Ekkor a keresztirányú tengely iránya nem változik, mivel a főtengely továbbra is függőleges.

Igazítsuk az elemeket mindkét tengely elejéhez:

css.parent {
  display: flex;
  flex-direction:  column-reverse; /* főtengely felfelé, keresztirányú jobbra */
  justify-content: flex-start;     /* elemek a főtengely elejéhez */
  align-items:     flex-start;     /* elemek a keresztirányú tengely elejéhez */
}

A kód végrehajtásának eredménye: