Sloupce

Na řadě je úvodní sekce. Její nadpis, text a odkaz jsou pod sebou, ale nadpis a text se dotýkají. Uděláme z úvodní sekce flex kontejner ve sloupci: pak můžeme její položky oddělit pomocí gap a později v této lekci je vycentrovat.

Směr hlavní osy (vlastnost flex-direction) nastavují tyto třídy:

Třída	CSS	Směr
`flex-row`	`flex-direction: row;`	řada zleva doprava (výchozí)
`flex-col`	`flex-direction: column;`	sloupec shora dolů
`flex-row-reverse`	`flex-direction: row-reverse;`	řada zprava doleva
`flex-col-reverse`	`flex-direction: column-reverse;`	sloupec zdola nahoru

Pozor: flex-col říká jen to, kterým směrem položky jdou. Kontejner potřebuje i třídu flex; bez ní vůbec není flex kontejnerem.

Jak víte z kurzu CSS, osy se otáčejí spolu se směrem. Ve sloupci vede hlavní osa shora dolů a příčná osa zleva doprava. Ve sloupci proto justify-* posouvá položky nahoru a dolů a items-* doleva a doprava.

Pokyny

Přidejte úvodní sekci (prvku section s oranžovým pozadím) třídy flex flex-col. Položky jsou pod sebou jako předtím, ale podívejte se na odkaz: je teď široký jako celá úvodní sekce. Ve sloupci vede příčná osa zleva doprava a flex položky se podél ní roztahují (výchozí je items-stretch). Jako flex položka se odkaz chová jako blok, takže jeho třída inline-block už nic nemění.

Přidejte třídu gap-4. Nadpis, text a odkaz se od sebe vzdálí o 16 px.

Přidejte třídu items-start. Položky se už neroztahují: každá je jen tak široká, jak potřebuje její obsah, a stojí na začátku příčné osy, tedy vlevo.

Začněte programovat zdarma

4/11