Bootstrap - Flex: Panduan Komprehensif untuk Pemula

Halo sana, para pengembang web yang sedang mencari ilmu! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia sistem Flex Bootstrap. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun 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 melatih otot coding kita (itu cuma permainan kata!), mari kita pahami apa itu Bootstrap Flex. Flex adalah sistem tata letak yang kuat dalam Bootstrap yang memungkinkan Anda menciptakan desain fleksibel dan responsif dengan mudah. Itu seperti memiliki tongkat ajaib yang menata elemen web Anda sesuai dengan kehendak Anda!

Mengaktifkan perilaku Flex

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

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

Kelas d-flex ini mengubah wadah Anda menjadi wadah Flex. Semua yang ada di dalam wadah ini sekarang menjadi item Flex. Keren, kan?

Arah

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

<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 horizontal (kiri ke kanan), sedangkan flex-column menumpuk mereka vertikal (atas ke bawah).

Pempaan Konten

Menjustifikasi konten dalam Flex adalah seperti menata buku di rak. Anda dapat mendorong mereka ke awal, akhir, tengah, atau menyebar mereka secara merata. Mari 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-beda sepanjang sumbu utama. Mainkan dengan mereka untuk melihat keajaiban terjadi!

Menyelaraskan Item

Sementara justify-content bekerja sepanjang sumbu utama, align-items berurusan dengan sumbu silang. Pahamiannya seperti menyesuaikan tinggi buku di rak. Berikut 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.

Align Self

kadang-kadang, Anda ingin satu item keluar dari 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 individu memiliki perataan yang berbeda dari saudara-saudaranya.

Isi

Kelas flex-fill seperti spons - ia membuat item Flex menyerap semua ruang yang 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 Kecil

Properti tumbuh dan kecil mengontrol bagaimana item Flex diperluas 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">Kecil</div>
</div>

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

Margin Otomatis

Margin otomatis dalam Flex adalah seperti spasi magis. 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 spacing otomatis.

Lipat

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

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

Align Content

Ketika Anda memiliki beberapa baris item Flex, align-content membantu Anda mengontrol bagaimana baris ini diperatakan:

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

Media Object

Akhirnya, mari kita lihat contoh praktis - objek media. Itu 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 lainnya dan menyesuaikan sesuai kebutuhan Anda.
</div>
</div>

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

Dan begitu saja! Anda telah mengflexkan Anda melalui sistem Flex Bootstrap. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba properti ini. Sebelum Anda tahu, Anda akan menciptakan tata letak fleksibel, responsif seperti seorang pro!

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

Properti	Deskripsi	Kelas Contoh
Enable Flex	Mengubah wadah menjadi wadah Flex	d-flex
Arah	Mengatur sumbu utama wadah Flex	flex-row, flex-column
Justify Content	Meratakan item sepanjang sumbu utama	justify-content-start, justify-content-end, justify-content-center, justify-content-between, justify-content-around
Align Items	Meratakan item sepanjang sumbu silang	align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch
Align Self	Meratakan item individu	align-self-start, align-self-center, align-self-end
Fill	Membuat item menyerap ruang tersedia	flex-fill
Tumbuh	Memungkinkan item untuk tumbuh	flex-grow-1
Kecil	Memungkinkan item untuk kecil	flex-shrink-1
Auto Margins	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.
Align Content	Meratakan baris Flex	align-content-start, align-content-end, dll.

Selamat berflex, para super bintang desain web masa depan!

Credits: Image by storyset