Poravnanje fleks blokova po poprečnoj osi u CSS

Hajde sada da poravnamo blokove i po poprečnoj osi. Poravnanje po ovoj osi se postavlja svojstvom align-items. Vrednost flex-start pripije elemente na početak ose, a vrednost flex-end - na kraj.

Hajde da probamo na primerima.

Primer

Usmerimo glavnu osu s leva na desno. U ovom slučaju poprečna osa će biti usmerena odozgo na dole. Hajde da podesimo raspored naših blokova i po glavnoj osi, i po poprečnoj osi.

Po glavnoj osi pripijmo blokove na njen početak, odnosno na levu ivicu. Za ovo justify-content podesimo u vrednost flex-start. Po poprečnoj osi takođe pripijmo blokove na njen početak, odnosno na gornju ivicu. Za ovo align-items takođe podesimo u vrednost flex-start.

Pogledajmo šta nam se dobija:

css.parent {
  display: flex;
  flex-direction:  row;        /* glavna osa na desno, poprečna na dole */
  justify-content: flex-start; /* blokovi na početak glavne ose */
  align-items:     flex-start; /* blokovi na početak poprečne ose */
}

Rezultat izvršenja koda:

Primer

Hajde sada da pripijemo blokove na kraj poprečne ose, odnosno na dno. Za ovo align-items podesimo u vrednost flex-end:

css.parent {
  display: flex;
  flex-direction:  row;        /* glavna osa na desno, poprečna na dole */
  justify-content: flex-start; /* blokovi na početak glavne ose */
  align-items:     flex-end;   /* blokovi na kraj poprečne ose */
}

Rezultat izvršenja koda:

Primer

Usmerimo sada glavnu osu odozgo na dole. Pošto je glavna osa vertikalna, onda poprečna će biti usmerena s desna na levo. Hajde da pripijemo blokove po obe ose na njihov početak:

css.parent {
  display: flex;
  flex-direction:  column;     /* glavna osa na dole, poprečna na desno */
  justify-content: flex-start; /* blokovi na početak glavne ose */
  align-items:     flex-start; /* blokovi na početak poprečne ose */
}

Rezultat izvršenja koda:

Primer

A sada po poprečnoj osi pripijmo blokove na njen kraj:

css.parent {
  display: flex;
  flex-direction:  column;     /* glavna osa na dole, poprečna na desno */
  justify-content: flex-start; /* blokovi na početak glavne ose */
  align-items:     flex-end;   /* blokovi na kraj poprečne ose */
}

Rezultat izvršenja koda:

Primer

Pripijmo blokove na kraj obe ose:

css.parent {
  display: flex;
  flex-direction:  column;   /* glavna osa na dole, poprečna na desno */
  justify-content: flex-end; /* blokovi na kraj glavne ose */
  align-items:     flex-end; /* blokovi na kraj poprečne ose */
}

Rezultat izvršenja koda:

Primer

Hajde da promenimo smer glavne ose - usmerimo je odozdo na gore. Pri tome poprečna osa neće promeniti svoj smer, pošto je glavna osa i dalje vertikalna.

Pripijmo blokove na početak obe ose:

css.parent {
  display: flex;
  flex-direction:  column-reverse; /* glavna osa na gore, poprečna na desno */
  justify-content: flex-start;     /* blokovi na početak glavne ose */
  align-items:     flex-start;     /* blokovi na početak poprečne ose */
}

Rezultat izvršenja koda:

Praktični zadaci