Směr a centrování

Na řadě je oblast s nadpisem: prvek div se třídou nadpis-pozadi, ve kterém jsou hlavní nadpis a podnadpis. Chceme je mít pod sebou a vycentrované vodorovně i svisle.

Zatím byly naše flex položky vždycky v řadě. Směr hlavní osy určuje vlastnost flex-direction (směr) flex kontejneru:

row (řada): řada zleva doprava. To je výchozí hodnota.
column (sloupec): sloupec shora dolů.
row-reverse a column-reverse: řada zprava doleva nebo sloupec zdola nahoru, takže poslední položka je první.

Když se změní směr, otočí se s ním i osy. Ve sloupci vede hlavní osa shora dolů a příčná osa zleva doprava:

A protože justify-content pracuje vždy na hlavní ose a align-items na příčné, ve sloupci posouvá justify-content položky svisle a align-items vodorovně. Abychom něco vycentrovali v obou směrech, potřebujeme obě vlastnosti, ať je směr jakýkoli:

.kontejner {
	display: flex;
	flex-direction: column;
	justify-content: center; /* ve sloupci svisle */
	align-items: center; /* ve sloupci vodorovně */
}

Vycentrovat něco svisle bývalo v CSS pověstně obtížné. S flexboxem na to stačí pár deklarací.

Pokyny

Do pravidla pro .nadpis-pozadi přidejte deklaraci display: flex. Nadpis a podnadpis se stanou flex položkami a postaví se vedle sebe do řady.

Přidejte deklaraci flex-direction: column. Nadpis a podnadpis jsou zase pod sebou, tentokrát ale jako flex položky ve sloupci.

Přidejte deklaraci justify-content: center. Hlavní osa teď vede shora dolů, takže se nadpis a podnadpis přesunou doprostřed výšky oblasti s nadpisem.

Přidejte deklaraci align-items: center, která je vycentruje i vodorovně.

Začněte programovat zdarma

4/8