Melenturkan
Kelola tata letak, perataan, dan ukuran kolom kisi, navigasi, komponen, dan lainnya dengan cepat dengan rangkaian lengkap utilitas flexbox responsif. Untuk implementasi yang lebih kompleks, CSS khusus mungkin diperlukan.
Terapkan display
utilitas untuk membuat wadah flexbox dan mengubah elemen turunan langsung menjadi item fleksibel. Wadah dan item fleksibel dapat dimodifikasi lebih lanjut dengan properti fleksibel tambahan.
Variasi responsif juga ada untuk .d-flex
dan .d-inline-flex
.
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
Atur arah item fleksibel dalam wadah fleksibel dengan utilitas arah. Dalam kebanyakan kasus, Anda dapat menghilangkan kelas horizontal di sini karena default browser adalah row
. Namun, Anda mungkin mengalami situasi di mana Anda perlu menetapkan nilai ini secara eksplisit (seperti tata letak responsif).
Gunakan .flex-row
untuk mengatur arah horizontal (default browser), atau .flex-row-reverse
untuk memulai arah horizontal dari sisi yang berlawanan.
Gunakan .flex-column
untuk mengatur arah vertikal, atau .flex-column-reverse
untuk memulai arah vertikal dari sisi yang berlawanan.
Variasi responsif juga ada untuk flex-direction
.
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
Gunakan justify-content
utilitas pada wadah flexbox untuk mengubah perataan item fleksibel pada sumbu utama (sumbu x untuk memulai, sumbu y jika flex-direction: column
). Pilih dari start
(browser default), end
, center
, between
, atau around
.
Variasi responsif juga ada untuk justify-content
.
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
Gunakan align-items
utilitas pada wadah flexbox untuk mengubah perataan item fleksibel pada sumbu silang (sumbu y untuk memulai, sumbu x jika flex-direction: column
). Pilih dari start
, end
, center
, baseline
, atau stretch
(browser default).
Variasi responsif juga ada untuk align-items
.
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
Gunakan align-self
utilitas pada item flexbox untuk mengubah perataannya satu per satu pada sumbu silang (sumbu y untuk memulai, sumbu x jika flex-direction: column
). Pilih dari opsi yang sama seperti align-items
: start
, end
, center
, baseline
, atau stretch
(browser default).
Variasi responsif juga ada untuk align-self
.
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
Gunakan .flex-fill
kelas pada serangkaian elemen saudara untuk memaksanya menjadi lebar yang sama sambil mengambil semua ruang horizontal yang tersedia. Terutama berguna untuk navigasi dengan lebar yang sama, atau dibenarkan.
Variasi responsif juga ada untuk flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
Gunakan .flex-grow-*
utilitas untuk mengaktifkan kemampuan item fleksibel untuk tumbuh untuk mengisi ruang yang tersedia. Dalam contoh di bawah ini, .flex-grow-1
elemen menggunakan semua ruang yang tersedia, sambil membiarkan dua item fleksibel lainnya menggunakan ruang yang diperlukan.
Gunakan .flex-shrink-*
utilitas untuk mengaktifkan kemampuan item fleksibel untuk menyusut jika perlu. Dalam contoh di bawah, item fleksibel kedua dengan .flex-shrink-1
dipaksa untuk membungkus isinya ke baris baru, "menyusut" untuk memberikan lebih banyak ruang untuk item fleksibel sebelumnya dengan .w-100
.
Variasi responsif juga ada untuk flex-grow
dan flex-shrink
.
.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
Flexbox dapat melakukan beberapa hal yang cukup mengagumkan saat Anda mencampur perataan fleksibel dengan margin otomatis. Ditampilkan di bawah ini adalah tiga contoh pengendalian item fleksibel melalui margin otomatis: default (tanpa margin otomatis), mendorong dua item ke kanan ( .mr-auto
), dan mendorong dua item ke kiri ( .ml-auto
).
Sayangnya, IE10 dan IE11 tidak mendukung margin otomatis dengan benar pada item fleksibel yang induknya memiliki nilai non-default justify-content
. Lihat jawaban StackOverflow ini untuk detail lebih lanjut.
Pindahkan satu item fleksibel secara vertikal ke atas atau bawah wadah dengan mencampur align-items
, flex-direction: column
, dan margin-top: auto
atau margin-bottom: auto
.
Ubah cara item fleksibel dibungkus dalam wadah fleksibel. Pilih dari tanpa pembungkus sama sekali (browser default) dengan .flex-nowrap
, membungkus dengan .flex-wrap
, atau membalikkan pembungkusan dengan .flex-wrap-reverse
.
Variasi responsif juga ada untuk flex-wrap
.
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
Ubah urutan visual item fleksibel tertentu dengan beberapa order
utilitas. Kami hanya menyediakan opsi untuk membuat item pertama atau terakhir, serta reset untuk menggunakan urutan DOM. Seperti order
mengambil nilai integer apa pun (misalnya, 5
), tambahkan CSS khusus untuk nilai tambahan apa pun yang diperlukan.
Variasi responsif juga ada untuk order
.
.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12
Gunakan align-content
utilitas pada wadah flexbox untuk menyelaraskan item fleksibel pada sumbu silang. Pilih dari start
(browser default), end
, center
, between
, around
, atau stretch
. Untuk mendemonstrasikan utilitas ini, kami telah menerapkan flex-wrap: wrap
dan meningkatkan jumlah item fleksibel.
Perhatian! Properti ini tidak berpengaruh pada satu baris item fleksibel.
Variasi responsif juga ada untuk align-content
.
.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch