Flex Bootstrap 5

Kotak fleksibel

Perbedaan utama antara Bootstrap 3 dan Bootstrap 4 & 5 adalah Bootstrap 5 saat ini menggunakan flexbox bukannya floating untuk menangani tata letak.

Modul tata letak kotak fleksibel, yang dapat membuat desain struktur tata letak responsif fleksibel dengan mudah, tanpa perlu menggunakan floating atau posisi.

Jika Anda tidak mengenal flex, dapatkan referensi di Tutorial Flexbox CSS belajar.

Keterangan：Versi Flexbox tidak didukung oleh IE9 dan versi sebelumnya.

Keterangan：Jika Anda memerlukan dukungan IE8-9, gunakan Bootstrap 3. Ini adalah versi Bootstrap yang paling stabil, tim masih mendukungnya untuk perbaikan kesalahan kritis dan perubahan dokumentasi. Tetapi tidak akan menambahkan fitur baru ke dalamnya.

Contoh

Untuk membuat kontainer flexbox dan mengubah item anak langsung menjadi item flex, gunakan d-flex Kelas:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Proyek Elasto 1</div>
  <div class="p-2 bg-warning">Proyek Elasto 2</div>
  <div class="p-2 bg-primary">Proyek Elasto 3</div>
</div>

Coba sendiri

Contoh

Untuk membuat kontainer flexbox dalam baris, gunakan d-inline-flex Kelas:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Proyek Elasto 1</div>
  <div class="p-2 bg-warning">Proyek Elasto 2</div>
  <div class="p-2 bg-primary">Proyek Elasto 3</div>
</div>

Coba sendiri

Arah horizontal

Gunakan .flex-row Tampilkan proyek elastis secara horizontal (ditarik bersamaan), ini adalah pengaturan baku.

Petunjuk:gunakan .flex-row-reverse Dapat menaruh kanan searah arah horizontal:

Contoh

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Proyek Elasto 1</div>
  <div class="p-2 bg-warning">Proyek Elasto 2</div>
  <div class="p-2 bg-primary">Proyek Elasto 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Proyek Elasto 1</div>
  <div class="p-2 bg-warning">Proyek Elasto 2</div>
  <div class="p-2 bg-primary">Proyek Elasto 3</div>
</div>

Coba sendiri

Arah vertikal

Gunakan .flex-column Tampilkan proyek flex secara vertikal (ditempatkan di atas satu sama lain), atau gunakan: .flex-column-reverse Membalikkan arah vertikal:

Contoh

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Proyek Elasto 1</div>
  <div class="p-2 bg-warning">Proyek Elasto 2</div>
  <div class="p-2 bg-primary">Proyek Elasto 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Proyek Elasto 1</div>
  <div class="p-2 bg-warning">Proyek Elasto 2</div>
  <div class="p-2 bg-primary">Proyek Elasto 3</div>
</div>

Coba sendiri

Lepas konten

gunakan .justify-content-* Kelas dapat mengubah cara penyesuaian proyek elastis. Kelas yang berlaku adalah: :

  • start(default)
  • end
  • center
  • between
  • around

Contoh

<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>

Coba sendiri

Lebar yang sama

gunakan di proyek flex .flex-fill Dapat memaksa mereka memiliki lebar yang sama:

Contoh

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Proyek elastis 1</div>
  <div class="p-2 bg-warning flex-fill">Proyek elastis 2</div>
  <div class="p-2 bg-primary flex-fill">Proyek elastis 3</div>
</div>

Coba sendiri

Membentuk

gunakan di proyek flex .flex-grow-1 Bisa mengambil ruang ekstra. Dalam contoh di bawah ini, dua proyek flex pertama mengambil ruang yang diperlukan, sementara proyek terakhir mengambil ruang yang tersisa:

Contoh

<div class="d-flex">
  <div class="p-2 bg-info">Proyek Elasto 1</div>
  <div class="p-2 bg-warning">Proyek Elasto 2</div>
  <div class="p-2 bg-primary flex-grow-1">Proyek Elasto 3</div>
</div>

Coba sendiri

Petunjuk:gunakan di proyek flex .flex-shrink-1 dapat membuatnya mengecil jika diperlukan.

Urutan

gunakan .order klasifikasi dapat mengubah urutan visual proyek flex tertentu. Klasifikasi yang berlaku dari 0 sampai 5, di mana angka terendah memiliki prioritas tertinggi (order-1 ditampilkan sebelum order-2, dan seterusnya):

Contoh

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Proyek Elasto 1</div>
  <div class="p-2 bg-warning order-2">Proyek Elasto 2</div>
  <div class="p-2 bg-primary order-1">Proyek Elasto 3</div>
</div>

Coba sendiri

marjin luar otomatis

gunakan .ms-auto(menggeser proyek ke arah kanan) atau gunakan .me-auto(menggeser proyek ke arah kiri) dapat menambahkan marjin otomatis untuk proyek elasto dengan mudah:

Contoh

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">Proyek Elasto 1</div>
  <div class="p-2 bg-warning">Proyek Elasto 2</div>
  <div class="p-2 bg-primary">Proyek Elasto 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Proyek Elasto 1</div>
  <div class="p-2 bg-warning">Proyek Elasto 2</div>
  <div class="p-2 me-auto bg-primary">Proyek Elasto 3</div>
</div>

Coba sendiri

Balik baris

dengan .flex-nowrap(default),.flex-wrap atau .flex-wrap-reversedapat mengelola bagaimana proyek flex di pakai dalam kontainer flex.

Contoh

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

Coba sendiri

Lepas konten

Gunakan .align-content-* Klasifikasi mengelola penyesuaian vertikal proyek elasto. Klasifikasi yang berlaku adalah:

  • .align-content-start(default)
  • .align-content-end
  • .align-content-center
  • .geser-isi-antara
  • .geser-isi-sekitar
  • .geser-isi-penuh

Keterangan：Kelas ini tidak mempengaruhi item fleksibel baris tunggal.

Klik tombol di bawah ini untuk melihat perbedaan lima klas, dengan mengubah penyesuaian vertikal item fleksibel di kotak contoh：

Contoh

<div class="d-flex flex-wrap geser-isi-mulai">..</div>
<div class="d-flex flex-wrap geser-isi-akhir">..</div>
<div class="d-flex flex-wrap geser-isi-tengah">..</div>
<div class="d-flex flex-wrap geser-isi-sekitar">..</div>
<div class="d-flex flex-wrap geser-isi-penuh">..</div>

Coba sendiri

Lepas objek

Gunakan .geser-item-* klas pengendalibaris tunggalyang mengaturgeser vertikal objek fleksibel. Klas yang berlaku adalah：

  • .geser-item-mulai
  • .geser-item-akhir
  • .geser-item-tengah
  • .geser-item-akar
  • .geser-item-penuh(default)

Klik tombol di bawah ini untuk melihat perbedaan lima klas:

Contoh

<div class="d-flex geser-sendiri-item-mulai">..</div>
<div class="d-flex geser-sendiri-item-akhir">..</div>
<div class="d-flex geser-sendiri-item-tengah">..</div>
<div class="d-flex geser-sendiri-item-akar">..</div>
<div class="d-flex geser-sendiri-item-penuh">..</div>

Coba sendiri

geser-sendiri

Gunakan .geser-sendiri-* klas pengendalitentukan objek fleksibelyang mengaturgeser vertikal. Klas yang berlaku adalah：

  • .geser-sendiri-mulai
  • .geser-sendiri-akhir
  • .geser-sendiri-tengah
  • .geser-sendiri-akar
  • .geser-sendiri-penuh(default)

Klik tombol di bawah ini untuk melihat perbedaan antara lima kelas ini:

Contoh

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Item Flex 1</div>
  <div class="p-2 border align-self-start">Item Flex 2</div>
  <div class="p-2 border">Item Flex 3</div>
</div>

Coba sendiri

Kelas Flex Tanggap

Seluruh kelas fleksibel memiliki kelas tanggap ekstra, yang membuat mudah untuk menetapkan kelas flex khusus di ukuran layar tertentu.

* dapat digantikan dengan sm, md, lg, xl atau xxl, yang masing-masing mewakili layar kecil, sedang, besar, sangat besar dan extra besar.

Cari kelas fleksibel yang khusus ..

Kelas Deskripsi Contoh
Container fleksibel
.d-*-flex Membuat container flexbox untuk layar yang berbeda. Coba sendiri
.d-*-inline-flex Membuat container flexbox dalam baris untuk layar yang berbeda. Coba sendiri
Arah
.flex-*-row Menampilkan item yang fleksibel secara horizontal di layar yang berbeda. Coba sendiri
.flex-*-row-reverse Menampilkan item yang fleksibel secara horizontal dan kanan di layar yang berbeda. Coba sendiri
.flex-*-column Menampilkan item yang fleksibel secara vertikal di layar yang berbeda. Coba sendiri
.flex-*-column-reverse Menampilkan item yang fleksibel secara vertikal dengan urutan yang berlawanan di layar yang berbeda. Coba sendiri
Konten yang berbaris
.justify-content-*-start Menampilkan item yang fleksibel di awal (kiri) di layar yang berbeda. Coba sendiri
.justify-content-*-end Menampilkan item yang fleksibel di ujung belakang (kanan) di layar yang berbeda. Coba sendiri
.justify-content-*-center Menampilkan item yang fleksibel di tengah container yang fleksibel di layar yang berbeda. Coba sendiri
.justify-content-*-between Menampilkan item yang fleksibel dengan cara yang sama di layar yang berbeda. Coba sendiri
.justify-content-*-around Menampilkan item yang fleksibel di sekeliling layar yang berbeda. Coba sendiri
Fill / Lebar Sama
.flex-*-fill Memaksa item yang fleksibel memiliki lebar yang sama di layar yang berbeda. Coba sendiri
Tumbuh
.flex-*-grow-0 Jangan membiarkan item tumbuh di layar yang berbeda.
.flex-*-grow-1 Membuat item tumbuh di layar yang berbeda.
Shrink
.flex-*-shrink-0 Jangan memperkecil objek di layar yang berbeda.
.flex-*-shrink-1 Jangan memperkecil objek di layar yang berbeda.
Urutan
.order-*-0-12 Ubah urutan dari 0 ke 12 di layar kecil. Coba sendiri
Balik baris
.flex-*-nowrap Jangan balik baris proyek di layar yang berbeda. Coba sendiri
.flex-*-wrap Balik baris proyek di layar yang berbeda. Coba sendiri
.flex-*-wrap-reverse Balik baris penjepit proyek di layar yang berbeda. Coba sendiri
Lepas konten
.align-content-*-start Lepas objek dari awal layar yang berbeda. Coba sendiri
.align-content-*-end Lepas objek di ujung layar yang berbeda. Coba sendiri
.align-content-*-center Lepas objek di pusat layar yang berbeda. Coba sendiri
.align-content-*-around Lepas objek di sekeliling layar yang berbeda. Coba sendiri
.align-content-*-stretch Gandahkan objek di layar yang berbeda. Coba sendiri
Lepas objek
.align-items-*-start Lepas objek baris tunggal dari awal layar yang berbeda. Coba sendiri
.align-items-*-end Lepas objek baris tunggal di ujung layar yang berbeda. Coba sendiri
.align-items-*-center Lepas objek baris tunggal di pusat layar yang berbeda. Coba sendiri
.align-items-*-baseline Lepas objek baris tunggal di garis dasar layar yang berbeda. Coba sendiri
.align-items-*-stretch Gandahkan objek baris tunggal di layar yang berbeda. Coba sendiri
Lepas diri
.align-self-*-start Lepas objek fleksibel dari awal layar yang berbeda. Coba sendiri
.align-self-*-end Lepas objek fleksibel di ujung layar yang berbeda. Coba sendiri
.align-self-*-center Lepas objek fleksibel di pusat layar yang berbeda. Coba sendiri
.align-self-*-baseline Lepas objek fleksibel di garis dasar layar yang berbeda. Coba sendiri
.align-self-*-stretch Gandahkan objek fleksibel di layar yang berbeda. Coba sendiri