Source

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.

Aktifkan perilaku fleksibel

Terapkan displayutilitas untuk membuat wadah flexbox dan mengubah elemen turunan langsung menjadi item fleksibel. Wadah dan item fleksibel dapat dimodifikasi lebih lanjut dengan properti fleksibel tambahan.

Saya adalah wadah flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Saya adalah wadah flexbox sebaris!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Variasi responsif juga ada untuk .d-flexdan .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

Arah

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-rowuntuk mengatur arah horizontal (default browser), atau .flex-row-reverseuntuk memulai arah horizontal dari sisi yang berlawanan.

Item fleksibel 1
Barang fleksibel 2
Barang fleksibel 3
Item fleksibel 1
Barang fleksibel 2
Barang fleksibel 3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Gunakan .flex-columnuntuk mengatur arah vertikal, atau .flex-column-reverseuntuk memulai arah vertikal dari sisi yang berlawanan.

Item fleksibel 1
Barang fleksibel 2
Barang fleksibel 3
Item fleksibel 1
Barang fleksibel 2
Barang fleksibel 3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

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

Membenarkan konten

Gunakan justify-contentutilitas 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.

Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

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

Sejajarkan item

Gunakan align-itemsutilitas 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).

Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

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

Sejajarkan diri

Gunakan align-selfutilitas 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).

Barang fleksibel
Item fleksibel yang disejajarkan
Barang fleksibel
Barang fleksibel
Item fleksibel yang disejajarkan
Barang fleksibel
Barang fleksibel
Item fleksibel yang disejajarkan
Barang fleksibel
Barang fleksibel
Item fleksibel yang disejajarkan
Barang fleksibel
Barang fleksibel
Item fleksibel yang disejajarkan
Barang fleksibel
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

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

Mengisi

Gunakan .flex-fillkelas 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.

Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

Variasi responsif juga ada untuk flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill

Tumbuh dan menyusut

Gunakan .flex-grow-*utilitas untuk mengaktifkan kemampuan item fleksibel untuk tumbuh untuk mengisi ruang yang tersedia. Dalam contoh di bawah ini, .flex-grow-1elemen menggunakan semua ruang yang tersedia, sambil membiarkan dua item fleksibel lainnya menggunakan ruang yang diperlukan.

Barang fleksibel
Barang fleksibel
Item fleksibel ketiga
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

Gunakan .flex-shrink-*utilitas untuk mengaktifkan kemampuan item fleksibel untuk menyusut jika perlu. Dalam contoh di bawah, item fleksibel kedua dengan .flex-shrink-1dipaksa untuk membungkus isinya ke baris baru, "menyusut" untuk memberikan lebih banyak ruang untuk item fleksibel sebelumnya dengan .w-100.

Barang fleksibel
Barang fleksibel
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

Variasi responsif juga ada untuk flex-growdan 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

Margin otomatis

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.

Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

Dengan align-item

Pindahkan satu item fleksibel secara vertikal ke atas atau bawah wadah dengan mencampur align-items, flex-direction: column, dan margin-top: autoatau margin-bottom: auto.

Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

Membungkus

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.

Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex flex-nowrap">
  ...
</div>
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex flex-wrap">
  ...
</div>
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex flex-wrap-reverse">
  ...
</div>

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

Memesan

Ubah urutan visual item fleksibel tertentu dengan beberapa orderutilitas. Kami hanya menyediakan opsi untuk membuat item pertama atau terakhir, serta reset untuk menggunakan urutan DOM. Seperti ordermengambil nilai integer apa pun (misalnya, 5), tambahkan CSS khusus untuk nilai tambahan apa pun yang diperlukan.

Item fleksibel pertama
Item fleksibel kedua
Item fleksibel ketiga
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

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

Sejajarkan konten

Gunakan align-contentutilitas 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: wrapdan meningkatkan jumlah item fleksibel.

Perhatian! Properti ini tidak berpengaruh pada satu baris item fleksibel.

Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex align-content-end flex-wrap">...</div>
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex align-content-center flex-wrap">...</div>
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex align-content-between flex-wrap">...</div>
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex align-content-around flex-wrap">...</div>
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
Barang fleksibel
<div class="d-flex align-content-stretch flex-wrap">...</div>

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