Bootstrap - Flex: Panduan Lengkap untuk Pemula

Hai sana, calon pengembang web! Saya sangat gembira menjadi panduan Anda dalam perjalanan menarik ini ke dunia sistem Flex Bootstrap. Sebagai seseorang yang telah mengajar ilmu komputer selama bertahun-tahun, saya dapat menjamin bahwa menguasai Flex akan menjadi perubahan besar dalam peralatan desain web Anda. Jadi, mari kita masuk dan membongkar misteri Flex bersama!

Apa Itu Bootstrap Flex?

Sebelum kita mulai melengkungkan otot pengodingan (dalam arti metafora!), mari kita pahami apa itu Bootstrap Flex. Flex adalah sistem Tata Letak yang kuat dalam Bootstrap yang memungkinkan Anda menciptakan desain yang fleksibel dan responsif dengan mudah. Itu seperti memiliki tongkat ajaib yang menata elemen web Anda seperti yang Anda inginkan!

Mengaktifkan perilaku flex

Untuk mulai menggunakan Flex, kita perlu mengaktifkannya terlebih dahulu. Itu seperti menyalakan saklar lampu sebelum Anda bisa melihat di ruangan yang gelap. Berikut adalah cara Anda melakukannya:

<div class="d-flex">
<!-- Elemen flex Anda disini -->
</div>

Kelas d-flex ini menjadikan wadah Anda menjadi wadah flex. Semua yang berada di dalam wadah ini sekarang menjadi item flex. Keren, kan?

Arah

Sekarang kita sudah mengaktifkan Flex, mari kita bicarakan tentang arah. Dalam dunia Flex, Anda dapat menata item Anda secara horisontal atau vertikal. Itu seperti memilih antara rak buku (vertikal) dan konveyor (horisontal).

<div class="d-flex flex-row">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

<div class="d-flex flex-column">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

Dalam contoh ini, flex-row menata item secara horisontal (kiri ke kanan), sedangkan flex-column menumpuk mereka secara vertikal (atas ke bawah).

Menjustifikasi konten

Menjustifikasi konten dalam Flex seperti menata buku di rak. Anda dapat mendorong mereka ke awal, akhir, tengah, atau menyebar mereka secara merata. mari kita lihat bagaimana:

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

Setiap kelas ini mendistribusikan item flex berbeda di sepanjang sumbu utama. Mainkanlah dengan mereka untuk melihat keajaiban terjadi!

Menyelaraskan item

Sementara justify-content bekerja di sepanjang sumbu utama, align-items berurusan dengan sumbu silang. Pahamiannya sebagai pengaturan tinggi buku di rak. Berikut adalah cara Anda menggunakannya:

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

Kelas-kelas ini membantu Anda mengontrol bagaimana item flex diperatakan vertikal di dalam wadah flex.

Menyelaraskan sendiri

kadang-kadang, Anda ingin satu item untuk keluar barisan dan diperatakan berbeda. Itu di mana align-self berguna:

<div class="d-flex">
<div class="align-self-start">Start</div>
<div class="align-self-center">Center</div>
<div class="align-self-end">End</div>
</div>

Ini memungkinkan item flex individual memiliki perataan yang berbeda dari saudaranya.

Isi

Kelas flex-fill seperti spons - itu membuat item flex menyerap semua ruang tersedia:

<div class="d-flex">
<div class="flex-fill">Item flex dengan banyak konten</div>
<div class="flex-fill">Item flex</div>
<div class="flex-fill">Item flex</div>
</div>

Semua item dengan flex-fill akan memiliki lebar yang sama, tanpa menghiraukan kontennya.

Tumbuh dan menyusut

Properti tumbuh dan menyusut mengontrol bagaimana item flex meluas atau menyusut. Itu seperti memiliki tali elastik di dalam tata letak Anda:

<div class="d-flex">
<div class="flex-grow-1">Tumbuh</div>
<div>Fixed</div>
<div class="flex-shrink-1">Menyusut</div>
</div>

Item flex-grow-1 akan tumbuh untuk mengisi ruang tersedia, sedangkan flex-shrink-1 akan menyusut jika perlu.

Margin otomatis

Margin otomatis dalam Flex seperti spasi ajaib. Mereka mendorong item flex menjauh dari yang lain:

<div class="d-flex">
<div class="mr-auto">Kiri</div>
<div>Tengah</div>
<div class="ml-auto">Kanan</div>
</div>

Ini menciptakan tata letak kiri-tengah-kanan dengan spasi otomatis.

Lipat

Ketika Anda memiliki terlalu banyak item untuk memasukkan dalam satu baris, flex-wrap datang ke penyelamat:

<div class="d-flex flex-wrap">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>

Ini memungkinkan item untuk melipat ke baris berikutnya saat mereka kehabisan ruang.

Urutan

Properti order memungkinkan Anda mengurutkan item flex tanpa mengubah HTML Anda. Itu seperti memiliki remote kontrol untuk tata letak Anda:

<div class="d-flex">
<div class="order-3">Pertama di DOM, terakhir di tata letak</div>
<div class="order-2">Kedua di DOM, kedua di tata letak</div>
<div class="order-1">Ketiga di DOM, pertama di tata letak</div>
</div>

Menyelaraskan konten

Ketika Anda memiliki beberapa baris item flex, align-content membantu Anda mengontrol bagaimana baris ini diberi jarak:

<div class="d-flex flex-wrap align-content-start" style="height: 200px;">
<div>Item</div>
<div>Item</div>
...
</div>

Ini bisa sangat berguna untuk menciptakan tata letak seperti grid.

Objek media

Akhirnya, mari kita lihat contoh praktis - objek media. Ini adalah pola umum dalam desain web, dan Flex membuatnya sangat mudah:

<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
Ini adalah beberapa konten dari komponen media. Anda dapat mengganti ini dengan konten apa pun dan menyesuaikan sesuai kebutuhan Anda.
</div>
</div>

Ini menciptakan objek media fleksibel dengan gambar di sebelah kiri dan konten di sebelah kanan.

Dan itu adalah! Anda telah melengkungkan Anda melalui sistem Flex Bootstrap. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba properti ini. Sebelum Anda tahu, Anda akan menciptakan tata letak fleksibel dan responsif seperti seorang pro!

Berikut adalah tabel yang menggabungkan semua properti Flex yang kita bahas:

Properti	Deskripsi	Kelas Contoh
Mengaktifkan Flex	Mengubah wadah menjadi wadah flex	d-flex
Arah	Mengatur sumbu utama flex container	flex-row, flex-column
Menjustifikasi Konten	Meratakan item di sepanjang sumbu utama	justify-content-start, justify-content-end, justify-content-center, justify-content-between, justify-content-around
Menyelaraskan Item	Meratakan item di sepanjang sumbu silang	align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch
Menyelaraskan Sendiri	Meratakan item individual	align-self-start, align-self-center, align-self-end
Isi	Membuat item menyerap ruang tersedia	flex-fill
Tumbuh	Memungkinkan item untuk tumbuh	flex-grow-1
Menyusut	Memungkinkan item untuk menyusut	flex-shrink-1
Margin Otomatis	Membuat spasi antara item	mr-auto, ml-auto
Lipat	Memungkinkan item untuk melipat ke baris berikutnya	flex-wrap
Urutan	Mengubah urutan item	order-1, order-2, dll.
Menyelaraskan Konten	Mengontrol bagaimana baris flex diberi jarak	align-content-start, align-content-end, dll.

Selamat melengkungkan, bakat desain web masa depan!

Credits: Image by storyset