Zarovnání flex prvků podél hlavní osy v CSS

Vlastnost justify-content umožňuje zarovnávat prvky podél hlavní osy. Dříve jste se již seznámili s hodnotami center, space-between, space-around, space-evenly. Pojďme se nyní naučit ještě několik dalších hodnot.

Hodnota flex-start přitlačí prvky na začátek hlavní osy, a hodnota flex-end - na konec. Podívejme se na příkladech.

Příklad

Nasměrujme hlavní osu zleva doprava, nastavením vlastnosti flex-direction na hodnotu row. Přitlačme bloky na začátek osy. K tomu nastavme justify-content na hodnotu flex-start:

.parent {
	display: flex;
	flex-direction: row; /* hlavní osa zleva doprava */
	justify-content: flex-start; /* bloky na začátek hlavní osy */
}

Výsledek provedení kódu:

Příklad

Nyní přitlačme bloky na konec osy. K tomu nastavme justify-content na hodnotu flex-end:

.parent {
	display: flex;
	flex-direction: row; /* hlavní osa zleva doprava */
	justify-content: flex-end; /* bloky na konec hlavní osy */
}

Výsledek provedení kódu:

Příklad

Nyní nasměrujme hlavní osu zprava doleva, nastavením vlastnosti flex-direction na hodnotu row-reverse. Přitlačme bloky na začátek osy, tedy na pravý okraj. K tomu nastavme justify-content na hodnotu flex-start:

.parent {
	display: flex;
	flex-direction: row-reverse; /* hlavní osa zprava doleva */
	justify-content: flex-start; /* bloky na začátek hlavní osy */
}

Výsledek provedení kódu:

Příklad

A nyní přitlačme bloky na konec hlavní osy, tedy na levý okraj. K tomu nastavme justify-content na hodnotu flex-end:

.parent {
	display: flex;
	flex-direction: row-reverse; /* hlavní osa zprava doleva */
	justify-content: flex-end; /* bloky na konec hlavní osy */
}

Výsledek provedení kódu:

Příklad

V předchozích příkladech byla hlavní osa orientována horizontálně. Nyní ji otočme a nasměrujme vertikálně.

Nasměrujme hlavní osu dolů, nastavením vlastnosti flex-direction na hodnotu column.

Přitlačme bloky na začátek hlavní osy, tedy na horní okraj. K tomu nastavme justify-content na hodnotu flex-start:

.parent {
	display: flex;
	flex-direction: column; /* hlavní osa shora dolů */
	justify-content: flex-start; /* bloky na začátek hlavní osy */
}

Výsledek provedení kódu:

Příklad

Nyní přitlačme bloky na konec hlavní osy, tedy na dolní okraj. K tomu nastavme justify-content na hodnotu flex-end:

.parent {
	display: flex;
	flex-direction: column; /* hlavní osa shora dolů */
	justify-content: flex-end; /* bloky na konec hlavní osy */
}

Výsledek provedení kódu:

Příklad

Otočme hlavní osu, nasměrujme ji zdola nahoru. K tomu nastavme vlastnost flex-direction na hodnotu column-reverse. V tomto případě bloky změní své pořadí - na začátku osy bude stát poslední blok v HTML kódu.

Přitlačme bloky na začátek hlavní osy, tedy na dolní okraj. K tomu nastavme justify-content na hodnotu flex-start:

.parent {
	display: flex;
	flex-direction: column-reverse; /* hlavní osa zdola nahoru */
	justify-content: flex-start; /* bloky na začátek hlavní osy */
}

Výsledek provedení kódu:

Příklad

Přitlačme bloky na konec hlavní osy, tedy na horní okraj. K tomu nastavme justify-content na hodnotu flex-end:

.parent {
	display: flex;
	flex-direction: column-reverse; /* hlavní osa zdola nahoru */
	justify-content: flex-end; /* bloky na konec hlavní osy */
}

Výsledek provedení kódu:

Praktické úlohy

Opakujte stránku podle tohoto vzoru: