Menu s pěti odkazy vedle sebe. Tlačítka v patičce rozestavená po celé šířce. Ikona a text, oba přesně uprostřed výšky. Tohle všechno se dřív dělalo složitými triky. Dnes na to stačí flexbox.
Flexbox rozkládá prvky do jedné řady (vodorovné nebo svislé) a rozděluje mezi ně volné místo.
display: flex;. Řídí, jak se rozloží jeho přímí potomci.nav { display: flex; }a přímo v nav s display: flex.Kontejner je police, položky jsou knihy. Knihy stojí v řadě zleva doprava. Můžeš je přisunout doleva, doprava, doprostřed nebo rozestavit s mezerami. Taky je můžeš srovnat nahoru, dolů nebo na střed police.
flex-direction: row (vodorovně, výchozí) nebo column (svisle).U row je hlavní osa zleva doprava.row je svislá.U row se položky na vedlejší ose srovnávají nahoru, dolů nebo na střed.| Vlastnost (na kontejneru) | Osa | Časté hodnoty |
|---|---|---|
justify-content | hlavní | flex-start, center, flex-end, space-between, space-around, space-evenly |
align-items | vedlejší | stretch (výchozí), flex-start, center, flex-end |
flex-wrap | – | nowrap (výchozí, vše v jedné řadě), wrap (zalomit na další řádek) |
gap | obě | mezera mezi položkami, např. 16px |
header.header { display: flex; justify-content: space-between; align-items: center; }. space-between dá první položku k levému a poslední k pravému okraji. align-items: center je vycentruje na vedlejší (svislé) ose.display: flex; justify-content: center; align-items: center;. Rodič musí mít výšku, jinak není kde centrovat svisle.Doplň hodnoty. Pamatuj: justify = hlavní osa, align = vedlejší.
flex-direction: column a justify-content: center pořád centruje vodorovně.column je hlavní osa svislá. justify-content teď posouvá položky nahoru a dolů, vodorovně je srovnává align-items.justify-content vždy pracuje na hlavní ose a align-items na vedlejší. Změnou směru se osy prohodí.
display: flex z rodiče udělá flex kontejner a z přímých potomků položky v jedné řadě. justify-content je rozmisťuje na hlavní ose, align-items na vedlejší. flex-direction určuje, která osa je hlavní.Máš kontejner široký 600 px a v něm tři karty. Mají být stejně široké? Má prostřední růst víc? Co když se okno zúží? Flexbox umí volné místo rozdělit podle pravidel, která mu dáš.
display: flex je kontejner. Jeho přímí potomci jsou položky, které se řadí za sebou podél hlavní osy..karty { display: flex; gap: 20px; }flex-direction: row vodorovně, column svisle). Vedlejší osa je na ni kolmá.justify-content řídí hlavní osu, align-items vedlejší.| Vlastnost | Význam | Výchozí |
|---|---|---|
flex-basis | základní velikost položky na hlavní ose, než se dělí místo | auto (vezme se width, případně obsah) |
flex-grow | kolik dílů volného místa položka dostane | 0 (neroste) |
flex-shrink | jak moc se zmenší, když místo chybí | 1 (smí se zmenšit) |
Zkratka flex: 1; znamená flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Když ho dáš všem položkám, budou stejně široké.
flex-basis, jinak width).gap.flex-grow všech položek → počet dílů.flex-grow × díl.width: 100px, flex-grow 1, 1, 2. Jak široké budou?gap: 20px, čtyři položky s flex: 1. Šířka jedné položky?flex: 1 dá základ 0, takže celé zbylé místo 800 − 60 = 740 px se dělí na 4 díly. Každá položka 185 px.flex: 1 – rovným dílem si rozdělí místoflex-grow: 0 – položka neroste, zůstane v základní velikostiflex-shrink: 0 – položka se nikdy nezmenší pod základflex-wrap: wrap – co se nevejde, přejde na další řádekalign-self: flex-end – jen tahle položka se srovná na konec vedlejší osyU každé kartičky si nejdřív představ, co se na stránce stane, a pak ji otoč.
flex-grow: 2 znamená, že položka bude dvakrát širší než ta s flex-grow: 1.flex-grow: 2 dostane dvakrát víc volného místa. Celková šířka záleží i na základní velikosti.V příkladu výše má položka s grow 2 šířku 250 px a s grow 1 šířku 175 px, to není dvojnásobek. Dvojnásobek by byl jen při základu 0, tedy s flex: 1 a flex: 2.
flex-basis), růst (flex-grow) a smršťování (flex-shrink). Volné místo se dělí podle poměru flex-grow. flex: 1 u všech dá stejně široké položky, flex-wrap: wrap dovolí zalomení řady.