Zarovnání na příčné ose

Logo a odkazy jsou teď na opačných koncích navigační lišty, ale obojí je přilepené k jejímu hornímu kraji a odkazy nejsou ani ve stejné výšce jako logo. Chtěli bychom je mít uprostřed výšky lišty.

Umístění položek na příčné ose určuje vlastnost align-items (zarovnání položek) flex kontejneru. V řadě vede příčná osa shora dolů, takže align-items posouvá položky nahoru a dolů:

stretch: položky se roztáhnou po celé příčné ose, takže v řadě jsou stejně vysoké jako kontejner. Roztáhnou se jen položky, které nemají nastavenou výšku. Tak se položky chovají, když align-items nenastavíte.

flex-start: položky jsou na začátku příčné osy (v řadě nahoře) a jsou jen tak vysoké, jak potřebuje jejich obsah.

center: položky jsou uprostřed.

flex-end: položky jsou na konci (v řadě dole).

Naše logo a odkazy jsou roztažené na celou výšku navigační lišty, ale text v nich zůstává nahoře. Proto vypadají jako přilepené k hornímu kraji.

Roztahování má ale i svůj užitek: díky němu jsou všechny karty plemen stejně vysoké, i když některé mají víc textu než jiné. Sjeďte dolů a podívejte se.

Pokyny

Do pravidla pro .navigace přidejte deklaraci align-items: center. Logo a odkazy se přesunou doprostřed výšky lišty.

Začněte programovat zdarma

Registrací souhlasíte s provozními podmínkami a zásadami ochrany osobních údajů.

Nebo se registrujte pomocí:

3/8