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">I'm a flexbox container!</div>

Saya adalah wadah flexbox sebaris!

<div class="d-inline-flex p-2">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">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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

<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

<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