Layout

Flexbox

Jak poskládat prvky do řady, rozestoupit je a zarovnat. Na jednu dimenzi: buď řádek, nebo sloupec.

Postavíme lištu s logem, menu a tlačítkem a pod ni řadu karet. V náhledu vidíte, kam se dostaneme.

Začátek

Všechno pod sebou

Blokové elementy se řadí pod sebe. Logo, menu i tlačítko jsou každé na jiném řádku a karty tvoří dlouhý sloupec.

Zatím jen vzhled: barvy, okraje a pevná šířka karet 220 px.

Vlastnost · 1

Zapnout display: flex

Jedno pravidlo na rodiči a jeho přímé děti se seřadí vedle sebe. Rodiči říkáme flex container, dětem flex itemy.

Itemy se řadí podél main axis, ve výchozím stavu zleva doprava. Kolmo na ni vede cross axis. flex-direction: column osy prohodí.

Vlastnost · 2

Mezery gap

Itemy jsou nalepené na sobě. gap mezi ně vloží mezeru, jen mezi ně, ne na okraje. Menu uvnitř lišty uděláme také jako flex, ať mají odkazy stejné rozestupy.

Flex containery se dají vnořovat. Item nav je zároveň containerem pro své odkazy.

Vlastnost · 3

Po main axis justify-content

Všechno je natlačené vlevo. space-between rozdělí volné místo mezi itemy: logo zůstane vlevo, tlačítko odjede doprava a menu se usadí mezi nimi.

Další hodnoty: flex-start (výchozí), center, flex-end, space-around a space-evenly.

Vlastnost · 4

Po cross axis align-items

Podívejte se na tlačítko: je vytažené přes celou výšku lišty a menu sedí nahoře. Výchozí hodnota stretch itemy roztahuje. My je chceme svisle na střed.

Snadno se to plete: justify-content = main axis (vodorovně), align-items = cross axis (svisle). Při flex-direction: column je to naopak.

Vlastnost · 5

Zalamování flex-wrap

Teď karty. Čtyři karty po 220 px se do jedné řady nevejdou. Bez zalamování by se flexbox snažil a karty smáčkl. S wrap přeteče poslední karta na další řádek.

Bez flex-wrap by flexbox karty zúžil, aby se vešly do jedné řady, i kdyby z nich zbyly nudle. Výchozí hodnota je nowrap.

Vlastnost · 6

Pružná šířka flex

Vpravo zůstává prázdné místo. Místo pevné šířky dáme kartám pružnost: začnou na 140 px a volné místo si rovným dílem rozdělí.

Tři čísla: grow (smí růst), shrink (smí se zmenšit) a basis (výchozí šířka). Často stačí jen flex: 1: všechny itemy stejně široké.

Responzivita

Na telefonu do sloupce

Karty se na mobilu přeskládaly samy, dvě a dvě. Lišta ale ne: logo, menu a tlačítko se tlačí v jedné řadě. Na mobilu otočíme main axis do sloupce.

Po otočení je cross axis vodorovná, takže align-items: flex-start teď itemy zarovná doleva.

Shrnutí

Řada, mezery, zarovnání

Ano

• display: flex na rodiči, ne na dětech
• gap místo marginů mezi itemy
• justify-content po main axis, align-items po cross axis
• flex-wrap: wrap a flex pro řady karet
• flex-direction: column na mobilu

Ne

• pevné šířky itemů, které se nevejdou na telefon
• flexbox na layout v řádcích i sloupcích, na to je grid

Další lekce: Grid →