Ang bawat karaniwang flexbox property, nakagrupo ayon sa kung saan ito iniapply: sa container at sa item. Pinapares ng bawat row ang property sa mga karaniwang value nito at sa ginagawa nito.
Nagla-layout ang flexbox ng mga element sa isang dimensyon: isang row o isang column. I-set ang display: flex sa parent at magiging flex container ito; ang mga direktang anak nito ay nagiging flex item. Ang mga property ng container ang kumokontrol sa distribusyon sa pangunahing axis at sa cross axis; ang mga property ng item ang kumokontrol kung paano lumalaki, lumiliit, o nag-a-align ang isang item. Piliin ang flexbox para sa mga one-dimensional na bar, row, at pag-center.
Talaan ng sanggunian · 13 mga entry
CSS FlexboxExplained
13 of 13 rows
Container
flex | inline-flex
Ginagawang flex container ang element.
row | column | row-reverse | column-reverse
Itinatakda ang main axis na dinadaluyan ng mga item.
flex-start | center | space-between | space-around | space-evenly
Idinistribyu ang mga item sa main axis.
stretch | center | flex-start | flex-end | baseline
Ina-align ang mga item sa cross axis.
flex-start | center | stretch | space-between
Nag-a-align ng mga na-wrap na row kapag may labis na espasyo sa cross axis.
nowrap | wrap | wrap-reverse
Hayaang mag-wrap ang mga item sa bagong linya sa halip na lumiliit.
0.5rem | 8px 16px
Espasyo sa pagitan ng mga item, pahalang at patayo.
Item
0 | 1 | 2
Gaano karaming free space ang sinisipsip ng item kumpara sa mga kapatid nito.
0 | 1
Gaano kalaki ang pagliit ng item kapag kulang ang espasyo.
auto | 200px | 50%
Ang panimulang laki bago hatiin ang free space.
1 | 1 0 auto | 0 0 200px
Shorthand para sa grow shrink basis.
auto | center | flex-start | flex-end | stretch
Pinapalitan ang align-items ng container para sa isang item.
0 | -1 | 2
Nag-aayos muli ng item nang hindi binabago ang source.