Zarovnání na hlavní ose
Teď se pustíme do navigační lišty nahoře na stránce. Chceme mít logo vlevo a odkazy vpravo, jako na většině webů.
Navigační lišta (prvek nav se třídou navigace) má dvě děti: logo a prvek div se třídou odkazy, ve kterém jsou tři odkazy. Když z lišty uděláme flex kontejner, stanou se tyto dvě děti jejími flex položkami.
Jak se položky rozloží podél hlavní osy, určuje vlastnost justify-content (zarovnání obsahu) flex kontejneru. Tady jsou její hodnoty, předvedené na třech položkách v řadě:
flex-start: položky jsou na začátku hlavní osy. Tam jsou, když justify-content nenastavíte.
center: položky jsou uprostřed.
flex-end: položky jsou na konci.
space-between: první položka je na začátku, poslední na konci a mezery mezi položkami jsou stejné.
space-around: každá položka má na obou stranách stejně místa, takže mezery na krajích jsou poloviční oproti mezerám mezi položkami.
space-evenly: všechny mezery jsou stejné, mezi položkami i na krajích.
Místu, které položky nezabírají, se říká volné místo. Při space-between se celé rozdělí mezi položky, a to je přesně to, co naše navigační lišta potřebuje.
Jak psát:
"
{
}
#
Pokyny
Do pravidla pro .navigace přidejte deklaraci display: flex. Logo a odkazy se postaví vedle sebe.
Přidejte deklaraci justify-content: space-between. Logo zůstane vlevo a odkazy se přesunou doprava.
Začněte programovat zdarma
2/8