Bootstrap 4 Flex
Bootstrap 4 Flex
Gunakan kelas fleksibel untuk mengontrol tata letak komponen Bootstrap 4.
kotak fleksibel
Perbedaan terbesar antara Bootstrap 3 dan Bootstrap 4 adalah bahwa Bootstrap 4 sekarang menggunakan flexbox, bukan float, untuk menangani tata letak.
Modul Tata Letak Kotak Fleksibel, memudahkan perancangan struktur tata letak responsif yang fleksibel tanpa menggunakan float atau positioning. Jika Anda baru mengenal flex, Anda dapat membacanya di Tutorial CSS Flexbox kami .
Catatan: Flexbox tidak didukung di IE9 dan versi sebelumnya.
Jika Anda memerlukan dukungan IE8-9, gunakan Bootstrap 3. Ini adalah versi Bootstrap yang paling stabil, dan masih didukung oleh tim untuk perbaikan bug penting dan perubahan dokumentasi. Namun, tidak ada fitur baru yang akan ditambahkan ke dalamnya.
Untuk membuat wadah flexbox dan mengubah turunan langsung menjadi item fleksibel, gunakan d-flexkelas:
Contoh
Contoh
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Untuk membuat wadah flexbox sebaris, gunakan d-inline-flexkelas:
Contoh
Contoh
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Arah Horisontal
Gunakan .flex-rowuntuk menampilkan item fleksibel secara horizontal (berdampingan). Ini adalah default.
Tip: Gunakan .flex-row-reverse
untuk meratakan kanan arah horizontal:
Contoh
Contoh
<div class="d-flex flex-row
bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Arah Vertikal
Gunakan .flex-columnuntuk menampilkan item fleksibel secara vertikal (di atas satu sama lain), atau .flex-column-reverse
untuk membalikkan arah vertikal:
Contoh
Contoh
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Membenarkan Konten
Gunakan .justify-content-*kelas untuk mengubah perataan item fleksibel. Kelas yang valid adalah start(default), end, center, betweenatau around:
Contoh
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>
Isi / Lebar Sama
Gunakan .flex-fillpada item fleksibel untuk memaksanya menjadi lebar yang sama:
Contoh
Contoh
<div class="d-flex">
<div class="p-2 bg-info
flex-fill">Flex
item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
Tumbuh
Gunakan .flex-grow-1pada item fleksibel untuk mengambil sisa ruang. Dalam contoh di bawah ini, dua item fleksibel pertama mengambil ruang yang diperlukan, sedangkan item terakhir mengambil sisa ruang yang tersedia:
Contoh
Contoh
<div class="d-flex">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
Tip: Gunakan .flex-shrink-1pada item fleksibel untuk membuatnya menyusut jika perlu.
Memesan
Ubah urutan visual item fleksibel tertentu dengan .orderkelas. Kelas yang valid adalah dari 0 hingga 12, di mana angka terendah memiliki prioritas tertinggi (urutan-1 ditampilkan sebelum pesanan-2, dst..):
Contoh
Contoh
<div class="d-flex bg-secondary">
<div class="p-2 bg-info
order-3">Flex
item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
Margin Otomatis
Tambahkan margin otomatis dengan mudah untuk melenturkan item dengan .mr-auto(dorong item ke kanan), atau dengan menggunakan .ml-auto(dorong item ke kiri):
Contoh
Contoh
<div class="d-flex
bg-secondary">
<div class="p-2 mr-auto bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div
class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 ml-auto bg-primary">Flex item
3</div>
</div>
Membungkus
Kontrol bagaimana item fleksibel dibungkus dalam wadah fleksibel dengan .flex-nowrap(default), .flex-wrapatau .flex-wrap-reverse.
Klik tombol di bawah untuk melihat perbedaan antara ketiga kelas, dengan mengubah pembungkus item fleksibel di kotak contoh:
Contoh
Contoh
<div class="d-flex flex-wrap">..</div>
<div class="d-flex
flex-wrap-reverse">..</div>
<div class="d-flex
flex-nowrap">..</div>
Sejajarkan Konten
Kontrol perataan vertikal item fleksibel yang dikumpulkan.align-content-* dengan
kelas. Kelas yang valid adalah .align-content-start(default), .align-content-end, .align-content-center, .align-content-between, .align-content-arounddan .align-content-stretch.
Catatan: Kelas-kelas ini tidak berpengaruh pada satu baris item fleksibel.
Contoh
Contoh
<div class="d-flex flex-wrap
align-content-start">..</div>
<div class="d-flex
flex-wrap align-content-end">..</div>
<div class="d-flex
flex-wrap align-content-center">..</div>
<div class="d-flex
flex-wrap align-content-around">..</div>
<div class="d-flex
flex-wrap align-content-stretch">..</div>
Sejajarkan Item
Kontrol perataan vertikal baris tunggal item fleksibel dengan .align-items-*
kelas. Kelas yang valid adalah .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, dan .align-items-stretch
(default).
Klik tombol di bawah untuk melihat perbedaan antara lima kelas:
Contoh
Contoh
<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>
Sejajarkan Diri
Kontrol perataan vertikal item fleksibel yang ditentukan dengan .align-self-*
kelas. Kelas yang valid adalah .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, dan .align-self-stretch
(default).
Klik tombol di bawah untuk melihat perbedaan antara lima kelas:
Contoh
Contoh
<div class="d-flex bg-light" style="height:150px">
<div
class="p-2 border">Flex item 1</div>
<div class="p-2 border
align-self-start">Flex item 2</div>
<div
class="p-2 border">Flex item 3</div>
</div>
Kelas Flex Responsif
All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.
The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Creates a flexbox container for different screens | |
.d-*-inline-flex |
Creates an inline flexbox container for different screens | |
| Direction | ||
.flex-*-row |
Display flex items horizontally on different screens | |
.flex-*-row-reverse |
Display flex items horizontally, and right-aligned, on different screens | |
.flex-*-column |
Display flex items vertically on different screens | |
.flex-*-column-reverse |
Display flex items vertically, with reversed order, on different screens screens | |
| Justified Content | ||
.justify-content-*-start |
Display flex items from the start (left-aligned) on different screens | |
.justify-content-*-end |
Display flex items at the end (right-aligned) on different screens | |
.justify-content-*-center |
Display flex items in the center of a flex container on different screens | |
.justify-content-*-between |
Display flex items in "between" on different screens | |
.justify-content-*-around |
Display flex items "around" on different screens | |
| Fill / Equal Width | ||
.flex-*-fill |
Force flex items into equal widths on different screens | |
| Grow | ||
.flex-*-grow-0 |
Don't make the items grow on different screens | |
.flex-*-grow-1 |
Make items grow on different screens | |
| Shrink | ||
.flex-*-shrink-0 |
Don't make the items shrink on diferent screens | |
.flex-*-shrink-1 |
Make items shrink on different screens | |
| Order | ||
.order-*-0-12 |
Change the order from 0 to 12 on small screens | |
| Wrap | ||
.flex-*-nowrap |
Don't wrap items on different screens | |
.flex-*-wrap |
Wrap items on different screens | |
.flex-*-wrap-reverse |
Reverse the wrapping of items on different screens | |
| Align Content | ||
.align-content-*-start |
Align gathered items from the start on different screens | |
.align-content-*-end |
Align gathered items at the end on different screens | |
.align-content-*-center |
Align gathered items in the center on different screens | |
.align-content-*-around |
Align gathered items "around" on different screens | |
.align-content-*-stretch |
Stretch gathered items on different screens | |
| Align Items | ||
.align-items-*-start |
Align single rows of items from the start on different screens | |
.align-items-*-end |
Align single rows of items at the end on different screens | |
.align-items-*-center |
Align single rows of items in the center on different screens | |
.align-items-*-baseline |
Align single rows of items on the baseline on different screens | |
.align-items-*-stretch |
Stretch single rows of items on different screens | |
| Align Self | ||
.align-self-*-start |
Align a flex item from the start on different screens | |
.align-self-*-end |
Align a flex item at the end on different screens | |
.align-self-*-center |
Align a flex item in the center on different screens | |
.align-self-*-baseline |
Align a flex item on the baseline on different screens | |
.align-self-*-stretch |
Stretch a flex item on different screens |