Setiap sifat flexbox yang biasa, dikumpulkan mengikut tempat ia digunakan: kontena dan item. Setiap baris memadankan sifat dengan nilai biasanya dan fungsinya.
Flexbox menyusun elemen dalam satu dimensi: baris atau lajur. Tetapkan display: flex pada elemen induk dan ia menjadi kontena flex; anak terusnya menjadi item flex. Sifat kontena mengawal agihan sepanjang paksi utama dan paksi silang; sifat item pula mengawal bagaimana satu item membesar, mengecut atau menjajarkan dirinya. Pilih flexbox untuk bar, baris dan penjajaran tengah satu dimensi.
Jadual rujukan · 13 entri
CSS FlexboxExplained
13 of 13 rows
Kontena
flex | inline-flex
Mengubah elemen menjadi kontena flex.
row | column | row-reverse | column-reverse
Menetapkan paksi utama yang dilalui item.
flex-start | center | space-between | space-around | space-evenly
Mengagihkan item sepanjang paksi utama.
stretch | center | flex-start | flex-end | baseline
Menjajarkan item sepanjang paksi silang.
flex-start | center | stretch | space-between
Menjajarkan baris yang melipat apabila ada ruang lebih pada paksi silang.
nowrap | wrap | wrap-reverse
Membenarkan item melipat ke baris baharu dan bukannya mengecut.
0.5rem | 8px 16px
Jarak antara item, mendatar dan menegak.
Item
0 | 1 | 2
Berapa banyak ruang bebas diserap oleh item berbanding adik-beradiknya.
0 | 1
Berapa banyak item mengecut apabila ruang tidak mencukupi.