Všechny běžné vlastnosti flexboxu, seskupené podle toho, kde platí: na kontejner a na položku. Každý řádek spojuje vlastnost s jejími běžnými hodnotami a tím, co dělá.
Flexbox rozvrhuje prvky v jednom rozměru: v řádku nebo ve sloupci. Nastavte display: flex na rodiče a stane se flex kontejnerem; jeho přímí potomci se stanou flex položkami. Vlastnosti kontejneru řídí rozložení podél hlavní osy a příčné osy; vlastnosti položky řídí, jak jednotlivá položka roste, zmenšuje se nebo se zarovnává. Flexbox volte pro jednorozměrné lišty, řádky a centrovaní obsahu.
Referenční tabulka · 13 položek
CSS FlexboxExplained
13 of 13 rows
Kontejner
flex | inline-flex
Změní prvek na flex kontejner.
row | column | row-reverse | column-reverse
Nastaví hlavní osu, podél které položky běží.
flex-start | center | space-between | space-around | space-evenly
Rozděluje položky podél hlavní osy.
stretch | center | flex-start | flex-end | baseline
Zarovnává položky podél příčné osy.
flex-start | center | stretch | space-between
Zarovnává zalomené řádky, když je na příčné ose přebytečný prostor.
nowrap | wrap | wrap-reverse
Umožňuje položkám zalomit se do nových řádků místo zmenšování.
0.5rem | 8px 16px
Mezera mezi položkami, vodorovně i svisle.
Položka
0 | 1 | 2
Kolik volného prostoru položka pohltí v poměru ke svým sourozencům.
0 | 1
O kolik se položka zmenší, když není dost místa.
auto | 200px | 50%
Výchozí velikost před rozdělením volného prostoru.