Każda typowa właściwość flexboksa, pogrupowana według tego, gdzie obowiązuje: kontener i element. Każdy wiersz łączy właściwość z jej typowymi wartościami i tym, co robi.
Flexbox układa elementy w jednym wymiarze: w wierszu lub w kolumnie. Ustaw display: flex na rodzicu, a stanie się on kontenerem flex; jego bezpośrednie dzieci stają się elementami flex. Właściwości kontenera sterują rozmieszczeniem wzdłuż osi głównej i osi poprzecznej; właściwości elementu sterują tym, jak pojedynczy element rośnie, kurczy się albo wyrównuje. Wybieraj flexboxa do jednowymiarowych pasków, wierszy i centrowania.
Tabela referencyjna · 13 wpisy
CSS FlexboxExplained
13 of 13 rows
Kontener
flex | inline-flex
Zamienia element w kontener flex.
row | column | row-reverse | column-reverse
Ustawia oś główną, wzdłuż której płyną elementy.
flex-start | center | space-between | space-around | space-evenly
Rozkłada elementy wzdłuż osi głównej.
stretch | center | flex-start | flex-end | baseline
Wyrównuje elementy wzdłuż osi poprzecznej.
flex-start | center | stretch | space-between
Wyrównuje zawinięte wiersze, gdy na osi poprzecznej pojawia się dodatkowe miejsce.
nowrap | wrap | wrap-reverse
Pozwala elementom przechodzić do nowych wierszy zamiast się kurczyć.
0.5rem | 8px 16px
Odstęp między elementami, w poziomie i w pionie.
Element
0 | 1 | 2
Jak dużo wolnego miejsca element pochłania względem rodzeństwa.
0 | 1
Jak bardzo element się kurczy, gdy brakuje miejsca.
auto | 200px | 50%
Rozmiar wyjściowy przed podziałem wolnego miejsca.
1 | 1 0 auto | 0 0 200px
Skrócony zapis grow shrink basis.
auto | center | flex-start | flex-end | stretch
Nadpisuje align-items kontenera dla jednego elementu.
0 | -1 | 2
Zmienia kolejność elementu bez zmian w kodzie źródłowym.