Setiap properti flexbox yang umum, dikelompokkan berdasarkan tempat penerapannya: kontainer dan item. Setiap baris memasangkan properti dengan nilai umumnya dan fungsinya.
Flexbox menata elemen dalam satu dimensi: baris atau kolom. Setel display: flex pada elemen induk dan ia menjadi kontainer flex; anak langsungnya menjadi item flex. Properti kontainer mengatur distribusi sepanjang sumbu utama dan sumbu silang; properti item mengatur bagaimana satu item tumbuh, menyusut, atau menyelaraskan dirinya. Pilih flexbox untuk bilah, baris, dan perataan tengah satu dimensi.
Tabel referensi · 13 entri
CSS FlexboxExplained
13 of 13 rows
Kontainer
flex | inline-flex
Mengubah elemen menjadi kontainer flex.
row | column | row-reverse | column-reverse
Mengatur sumbu utama yang dilalui item.
flex-start | center | space-between | space-around | space-evenly
Mendistribusikan item sepanjang sumbu utama.
stretch | center | flex-start | flex-end | baseline
Menyelaraskan item sepanjang sumbu silang.
flex-start | center | stretch | space-between
Menyelaraskan baris yang melipat ketika ada ruang ekstra pada sumbu silang.
nowrap | wrap | wrap-reverse
Mengizinkan item melipat ke baris baru alih-alih menyusut.
0.5rem | 8px 16px
Jarak antar item, horizontal dan vertikal.
Item
0 | 1 | 2
Seberapa banyak ruang bebas yang diserap item relatif terhadap saudaranya.
0 | 1
Seberapa banyak item menyusut saat ruang tidak cukup.
auto | 200px | 50%
Ukuran awal sebelum ruang bebas dibagikan.
1 | 1 0 auto | 0 0 200px
Singkatan untuk grow shrink basis.
auto | center | flex-start | flex-end | stretch
Mengesampingkan align-items kontainer untuk satu item.
0 | -1 | 2
Mengurutkan ulang satu item tanpa mengubah sumber.