Zarovnání flexboxů na příčné ose v CSS

Nyní zarovnáme bloky i na příčné ose. Zarovnání na této ose je nastaveno vlastností align-items. Hodnota flex-start přitlačí prvky na začátek osy a hodnota flex-end - na konec.

Pojďme to vyzkoušet na příkladech.

Příklad

Nasměrujme hlavní osu zleva doprava. V tomto případě bude příčná osa směrována shora dolů. Pojďme upravit umístění našich bloků jak na hlavní ose, tak na příčné ose.

Na hlavní ose přitlačíme bloky k jejímu začátku, tedy k levému okraji. K tomu nastavíme justify-content na hodnotu flex-start. Na příčné ose také přitlačíme bloky k jejímu začátku, tedy k hornímu okraji. K tomu nastavíme align-items rovněž na hodnotu flex-start.

Podívejme se, co nám vychází:

.parent {
	display: flex;
	flex-direction:  row;        /* hlavní osa doprava, příčná dolů */
	justify-content: flex-start; /* bloky na začátek hlavní osy */
	align-items:     flex-start; /* bloky na začátek příčné osy */
}

Výsledek provedení kódu:

Příklad

Nyní přitlačme bloky ke konci příčné osy, tedy ke dnu. K tomu nastavíme align-items na hodnotu flex-end:

.parent {
	display: flex;
	flex-direction:  row;        /* hlavní osa doprava, příčná dolů */
	justify-content: flex-start; /* bloky na začátek hlavní osy */
	align-items:     flex-end;   /* bloky na konec příčné osy */
}

Výsledek provedení kódu:

Příklad

Nyní nasměrujme hlavní osu shora dolů. Protože je hlavní osa vertikální, příčná bude směrována zprava doleva. Pojďme přitlačit bloky na obou osách k jejich začátku:

.parent {
	display: flex;
	flex-direction:  column;     /* hlavní osa dolů, příčná doprava */
	justify-content: flex-start; /* bloky na začátek hlavní osy */
	align-items:     flex-start; /* bloky na začátek příčné osy */
}

Výsledek provedení kódu:

Příklad

A nyní na příčné ose přitlačme bloky k jejímu konci:

.parent {
	display: flex;
	flex-direction:  column;     /* hlavní osa dolů, příčná doprava */
	justify-content: flex-start; /* bloky na začátek hlavní osy */
	align-items:     flex-end;   /* bloky na konec příčné osy */
}

Výsledek provedení kódu:

Příklad

Přitlačme bloky ke konci obou os:

.parent {
	display: flex;
	flex-direction:  column;   /* hlavní osa dolů, příčná doprava */
	justify-content: flex-end; /* bloky na konec hlavní osy */
	align-items:     flex-end; /* bloky na konec příčné osy */
}

Výsledek provedení kódu:

Příklad

Pojďme změnit směr hlavní osy - nasměrujme ji zdola nahoru. Přitom příčná osa nezmění svůj směr, protože hlavní osa je stále vertikální.

Přitlačme bloky na začátek obou os:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* hlavní osa nahoru, příčná doprava */
	justify-content: flex-start;     /* bloky na začátek hlavní osy */
	align-items:     flex-start;     /* bloky na začátek příčné osy */
}

Výsledek provedení kódu:

Praktické úlohy

Zopakujte stránku podle tohoto vzoru: