Poravnava fleks blokov vzdolž prečne osi v CSS

Zdaj pa poravnajmo bloke tudi vzdolž prečne osi. Poravnava vzdolž te osi je določena z lastnostjo align-items. Vrednost flex-start pritisne elemente na začetek osi, vrednost flex-end pa na konec.

Poskusimo s primeri.

Primer

Usmerimo glavno os od leve proti desni. V tem primeru bo prečna os usmerjena od zgoraj navzdol. Prilagodimo razporeditev naših blokov tako vzdolž glavne osi kot vzdolž prečne osi.

Vzdolž glavne osi pritisnimo bloke na njen začetek, to je na levi rob. Za to nastavimo justify-content na vrednost flex-start. Vzdolž prečne osi pravijo pritisnimo bloke na njen začetek, to je na zgornji rob. Za to nastavimo align-items pravijo na vrednost flex-start.

Poglejmo, kaj dobimo:

.parent {
	display: flex;
	flex-direction:  row;        /* glavna os v desno, prečna navzdol */
	justify-content: flex-start; /* bloki na začetek glavne osi */
	align-items:     flex-start; /* bloki na začetek prečne osi */
}

Rezultat izvajanja kode:

Primer

Zdaj pa pritisnimo bloke na konec prečne osi, to je na dno. Za to nastavimo align-items na vrednost flex-end:

.parent {
	display: flex;
	flex-direction:  row;        /* glavna os v desno, prečna navzdol */
	justify-content: flex-start; /* bloki na začetek glavne osi */
	align-items:     flex-end;   /* bloki na konec prečne osi */
}

Rezultat izvajanja kode:

Primer

Usmerimo zdaj glavno os od zgoraj navzdol. Ker je glavna os navpična, bo prečna usmerjena od desne proti levi. Pritisnimo bloke vzdolž obeh osi na njihov začetek:

.parent {
	display: flex;
	flex-direction:  column;     /* glavna os navzdol, prečna v desno */
	justify-content: flex-start; /* bloki na začetek glavne osi */
	align-items:     flex-start; /* bloki na začetek prečne osi */
}

Rezultat izvajanja kode:

Primer

Zdaj pa vzdolž prečne osi pritisnimo bloke na njen konec:

.parent {
	display: flex;
	flex-direction:  column;     /* glavna os navzdol, prečna v desno */
	justify-content: flex-start; /* bloki na začetek glavne osi */
	align-items:     flex-end;   /* bloki na konec prečne osi */
}

Rezultat izvajanja kode:

Primer

Pritisnimo bloke na konec obeh osi:

.parent {
	display: flex;
	flex-direction:  column;   /* glavna os navzdol, prečna v desno */
	justify-content: flex-end; /* bloki na konec glavne osi */
	align-items:     flex-end; /* bloki na konec prečne osi */
}

Rezultat izvajanja kode:

Primer

Zamenjajmo smer glavne osi - usmerimo jo od spodaj navzgor. Pri tem prečna os ne bo spremenila svoje smeri, ker je glavna os še vedno navpična.

Pritisnimo bloke na začetek obeh osi:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* glavna os navzgor, prečna v desno */
	justify-content: flex-start;     /* bloki na začetek glavne osi */
	align-items:     flex-start;     /* bloki na začetek prečne osi */
}

Rezultat izvajanja kode:

Praktične naloge

Ponovite stran po tem vzorcu: