Flex Bootstrap 5

Bok Flex

Perbedaan utama antara Bootstrap 3 dan Bootstrap 4 & 5 adalah Bootstrap 5 sekarang menggunakan flexbox bukannya floating untuk mengelola layout.

Modul layout kotak yang fleksibel, yang dapat merancang struktur layout responsif yang fleksibel dengan mudah tanpa memerlukan floating atau positioning.

Jika Anda tidak mengenal flex, Anda dapat mengikuti Panduan Flexbox CSS belajar.

Keterangan:Versi Flexbox yang lebih awal seperti IE9 tidak mendukung Flexbox.

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">Objek ketat 1</div>
  <div class="p-2 bg-warning">Objek ketat 2</div>
  <div class="p-2 bg-primary">Objek ketat 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">Objek ketat 1</div>
  <div class="p-2 bg-warning">Objek ketat 2</div>
  <div class="p-2 bg-primary">Objek ketat 3</div>
</div>

Coba sendiri

Arah horizontal

sila gunakan .flex-row Tampilkan projek elastic secara horizontal (ditarik bersamaan), ini adalah pengaturan lalai.

Petikan:guna .flex-row-reverse Boleh memutar kanan secara horizontal:

Contoh

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

Coba sendiri

Arah vertical

sila gunakan .flex-column Tampilkan projek flex secara vertical (ditarik ke atas satu sama lain), atau gunakan .flex-column-reverse Balikkan arah vertical:

Contoh

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

Coba sendiri

对齐内容

guna .justify-content-* Kelas boleh mengubah cara penarikan kiri projek elastic. Kelas yang berlaku adalah:：

  • start(Baku)
  • 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 atas projek flex .flex-fill Boleh memaksa mereka memiliki lebar yang sama:

Contoh

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

Coba sendiri

Tumbuh

gunakan di atas projek flex .flex-grow-1 Boleh mengambil ruang yang kelebihan. Dalam contoh di bawah, dua projek flex pertama mengambil ruang yang diperlukan, sementara projek terakhir mengambil ruang yang tersedia:

Contoh

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

Coba sendiri

Petikan:gunakan di atas projek flex .flex-shrink-1 boleh menggurang apabila diperlukan.

顺序

guna .order Kelas boleh mengubah urutan visual objek flex tertentu. Klas yang sah dari 0 hingga 5, di mana nombor terendah mempunyai prioriti tertinggi (order-1 dipaparkan sebelum order-2, dan seterusnya):

Contoh

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

Coba sendiri

marjin luar automatik

guna .ms-auto(menyemprotkan projek ke kanan) atau gunakan .me-auto(menyemprotkan projek ke kiri) Boleh dengan mudah menambah marjin automatik untuk objek flex:

Contoh

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

Coba sendiri

换行

melalui .flex-nowrap(default),.flex-wrap atau .flex-wrap-reverseboleh kawal bagaimana objek flex diwrapkan di dalam pemegang 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

对齐内容

sila gunakan .align-content-* Kawalan penjajaran vertikal objek ketat. Klas yang sah adalah:

  • .align-content-start(Baku)
  • .align-content-end
  • .align-content-center
  • .penjana-dukung-between
  • .penjana-dukung-around
  • .penjana-dukung-dukung

Keterangan:kelas ini tidak mempengaruhi objek elasti baris tunggal.

sila klik butang di bawah untuk lihat perbezaan lima kelas melalui pengubahsuaian penjana-dukung tinggikan objek elasti di ruang contoh:

Contoh

<div class="d-flex flex-wrap penjana-dukung-start">..</div>
<div class="d-flex flex-wrap penjana-dukung-end">..</div>
<div class="d-flex flex-wrap penjana-dukung-center">..</div>
<div class="d-flex flex-wrap penjana-dukung-around">..</div>
<div class="d-flex flex-wrap penjana-dukung-dukung">..</div>

Coba sendiri

对齐项目

sila gunakan .penjana-dukung-dukung kontrol kelasbaris tunggalkaedah penjana-dukung tinggikan objek elasti. Kelas yang sah adalah:

  • .penjana-dukung-dukung
  • .penjana-dukung-dukung
  • .penjana-dukung-dukung
  • .penjana-dukung-dukung
  • .penjana-dukung-dukung(Baku)

sila klik butang di bawah untuk lihat perbezaan antara lima kelas:

Contoh

<div class="d-flex penjana-dukung-dukung">..</div>
<div class="d-flex penjana-dukung-dukung">..</div>
<div class="d-flex penjana-dukung-dukung">..</div>
<div class="d-flex penjana-dukung-dukung">..</div>
<div class="d-flex penjana-dukung-dukung">..</div>

Coba sendiri

penjana-dukung diri

sila gunakan .penjana-dukung-* kontrol kelastetapkan objek elastikaedah penjana-dukung tinggikan. Kelas yang sah adalah:

  • .penjana-dukung
  • .penjana-dukung
  • .penjana-dukung
  • .penjana-dukung
  • .penjana-dukung(Baku)

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

Contoh

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

Coba sendiri

Kelas Flex Responsif

Semua kelas elastic mempunyai kelas respons yang tambahan, yang membuat mudah menetapkan kelas flex khusus untuk ukuran layar tertentu.

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

Cari kelas elastic khusus ..

Kelas Deskripsi Contoh
Wadah elastic
.d-*-flex Buat kontainer flexbox untuk layar-layar berbeda. 试一试
.d-*-inline-flex Buat kontainer flexbox dalam baris untuk layar-layar berbeda. 试一试
Arah
.flex-*-row Tampilkan objek elastic secara horizontal di layar-layar berbeda. 试一试
.flex-*-row-reverse Tampilkan objek elastic secara horizontal dan kanan di layar-layar berbeda. 试一试
.flex-*-column Tampilkan objek elastic secara vertikal di layar-layar berbeda. 试一试
.flex-*-column-reverse Tampilkan objek elastic secara vertikal dengan urutan sebaliknya di layar-layar berbeda. 试一试
Konten berbaris
.justify-content-*-start Tampilkan objek elastic dari awal (kiri) di layar-layar berbeda. 试一试
.justify-content-*-end Tampilkan objek elastic di ujung belakang (kanan) di layar-layar berbeda. 试一试
.justify-content-*-center Tampilkan objek elastic di tengah wadah elastic di layar-layar berbeda. 试一试
.justify-content-*-between Tampilkan objek elastic secara adil di layar-layar berbeda. 试一试
.justify-content-*-around Tampilkan objek elastic disekitar layar-layar berbeda. 试一试
Isi / Lebar Sama
.flex-*-fill memaksa objek elastic mempunyai lebar yang sama di layar-layar berbeda. 试一试
mengembangkan
.flex-*-grow-0 Jangan membiarkan objek di layar-layar berbeda mengembangkan.
.flex-*-grow-1 mengembangkan objek di layar-layar berbeda.
suntuk
.flex-*-shrink-0 不要让项目在不同屏幕上收缩。
.flex-*-shrink-1 使项目在不同屏幕上收缩。
顺序
.order-*-0-12 在小屏幕从 0 到 12 更改顺序。 试一试
换行
.flex-*-nowrap 不要在不同的屏幕上对项目换行。 试一试
.flex-*-wrap 在不同的屏幕上对项目换行。 试一试
.flex-*-wrap-reverse 反转不同屏幕上对项目的换行。 试一试
对齐内容
.align-content-*-start 在不同屏幕上从开头对齐项目。 试一试
.align-content-*-end 在不同屏幕的末尾对齐项目。 试一试
.align-content-*-center 在不同屏幕的中心对齐项目。 试一试
.align-content-*-around 在不同屏幕的周围对齐项目。 试一试
.align-content-*-stretch 在不同的屏幕上拉伸项目。 试一试
对齐项目
.align-items-*-start 在不同屏幕上从开头对齐单行项目。 试一试
.align-items-*-end 在不同屏幕的末尾对齐单行项目。 试一试
.align-items-*-center 在不同屏幕的中心对齐单行项目。 试一试
.align-items-*-baseline 在不同屏幕的基线上对齐单行项目。 试一试
.align-items-*-stretch 在不同屏幕上拉伸单行项目。 试一试
对齐自身
.align-self-*-start 在不同屏幕上从开头对齐弹性项目。 试一试
.align-self-*-end 在不同屏幕的末尾对齐弹性项目。 试一试
.align-self-*-center 在不同屏幕的中心对齐弹性项目。 试一试
.align-self-*-baseline 在不同屏幕的基线上对齐弹性项目。 试一试
.align-self-*-stretch 在不同屏幕上拉伸弹性项目。 试一试