Fiecare proprietate flexbox uzuală, grupată după unde se aplică: containerul și elementul. Fiecare rând asociază proprietatea cu valorile ei uzuale și cu ce face.
Flexbox așază elementele pe o singură dimensiune: un rând sau o coloană. Setează display: flex pe părinte și acesta devine containerul flex; copiii direcți devin elemente flex. Proprietățile containerului controlează distribuția pe axa principală și pe axa transversală; proprietățile elementului controlează cum crește, se strânge sau se aliniază un element individual. Alege flexbox pentru bare, rânduri și centrare pe o singură dimensiune.
Tabel de referință · 13 intrări
CSS FlexboxExplained
13 of 13 rows
Container
flex | inline-flex
Transformă elementul într-un container flex.
row | column | row-reverse | column-reverse
Stabilește axa principală de-a lungul căreia curg elementele.
flex-start | center | space-between | space-around | space-evenly
Distribuie elementele de-a lungul axei principale.
stretch | center | flex-start | flex-end | baseline
Aliniază elementele de-a lungul axei transversale.
flex-start | center | stretch | space-between
Aliniază rândurile împăturite când există spațiu liber pe axa transversală.
nowrap | wrap | wrap-reverse
Permite elementelor să treacă pe rânduri noi în loc să se strângă.
0.5rem | 8px 16px
Spațiu între elemente, orizontal și vertical.
Element
0 | 1 | 2
Cât spațiu liber absoarbe elementul în raport cu frații săi.
0 | 1
Cât se strânge elementul când spațiul nu este suficient.
auto | 200px | 50%
Dimensiunea de pornire înainte de împărțirea spațiului liber.
1 | 1 0 auto | 0 0 200px
Formă scurtă pentru grow shrink basis.
auto | center | flex-start | flex-end | stretch
Suprascrie align-items al containerului pentru un singur element.