CSS - Flexbox: Panduan Pemula untuk Tata Letak Kotak Fleksibel

Hai sana, para master CSS masa depan! Saya sangat gembira menjadi panduanmu dalam perjalanan menarik ke dunia CSS Flexbox. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun-tahun, saya bisa katakan bahwa Flexbox adalah salah satu alat perubahan permainan yang akan membuat hidupmu dalam desain web jauh lebih mudah. Jadi, mari kita masuk ke dalamnya!

Apa Itu CSS Flexbox?

Bayangkan Anda menata furnitur di dalam ruangan. Anda ingin segala sesuatu cocok sempurna, tetapi Anda juga ingin fleksibilitas untuk mudah memindahkan sesuatu. Itu tepat apa yang dilakukan CSS Flexbox untuk tata letak web! Itu adalah model tata letak yang memungkinkan Anda mendesain struktur tata letak responsif fleksibel tanpa menggunakan float atau posisi.

Flexbox membuat hal ini mudah:

• Menyusun item secara vertikal dan horizontal
• Mengurutkan item tanpa mengubah HTML
• Membuat elemen wadah fleksibel

Elemen Flexbox

Sebelum kita mulai mengoding, mari kita mengerti dua komponen utama Flexbox:

1. Flex Container: Ini adalah elemen induk yang menahan semua item flex.
2. Flex Items: Ini adalah elemen anak dalam flex container.

Pertimbangkan itu seperti sebuah kotak (wadah) dengan mainan (item) di dalamnya. Cara Anda menata mainan ini tergantung pada bagaimana Anda mengatur properti Flexbox Anda.

Tata Letak Flexbox Dasar

Mari kita mulai dengan contoh sederhana:

<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>

.flex-container {
display: flex;
}

.flex-item {
padding: 20px;
background-color: #f1f1f1;
margin: 10px;
}

Dalam contoh ini, kita telah membuat flex container dengan tiga flex item di dalamnya. Properti display: flex; pada wadah adalah yang mengaktifkan Flexbox.

Tata Letak Flexbox Vertikal

Ingin menata item Anda secara vertikal? Itu mudah seperti kue!

.flex-container {
display: flex;
flex-direction: column;
}

Properti flex-direction: column; mengubah sumbu utama menjadi vertikal, menata item Anda dari atas ke bawah.

Properti Justify Content Flexbox

Sekarang, mari bicarakan tentang penempatan. Properti justify-content menyusun item secara horizontal dan menerima nilai berikut:

Nilai	Deskripsi
flex-start	Item dipakai menuju awal arah flex
flex-end	Item dipakai menuju akhir arah flex
center	Item diletakkan di tengah garis
space-between	Item dipersebar secara rata di garis
space-around	Item dipersebar secara rata dengan ruang seimbang di sekitar

.flex-container {
display: flex;
justify-content: space-between;
}

Ini akan menyebar item Anda secara rata di sepanjang wadah.

Properti Align Items Flexbox

Sementara justify-content bekerja di sumbu utama, align-items bekerja di sumbu silang. Itu menerima nilai berikut:

Nilai	Deskripsi
stretch	Item diperpanjang untuk memenuhi wadah (default)
flex-start	Item diletakkan di awal sumbu silang
flex-end	Item diletakkan di akhir sumbu silang
center	Item diletakkan di tengah sumbu silang
baseline	Item diatur sedemikian rupa agar garis dasar mereka sejajar

.flex-container {
display: flex;
align-items: center;
}

Ini akan menengahkan semua item secara vertikal di dalam wadah.

Menengahkan Div menggunakan Flexbox

Ini adalah trik yang menarik: menengahkan div secara horizontal dan vertikal adalah hal yang mudah dengan Flexbox!

.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* atau tinggi apa pun */
}

Properti Wrap Flexbox

kadang-kadang, Anda mungkin ingin item Anda melengkung ke baris berikutnya jika mereka tidak muat. Itu adalah tempat flex-wrap masuk:

.flex-container {
display: flex;
flex-wrap: wrap;
}

Ini memungkinkan item untuk melengkung ke baris berikutnya jika tidak cukup ruang.

Properti Align Self Flexbox

Apa jika Anda ingin menata item satu secara berbeda? align-self untuk pertolongan!

.flex-item:nth-child(2) {
align-self: flex-end;
}

Ini menata item kedua ke dasar wadah, tanpa menghiraukan item lainnya.

Properti Flexbox Container

Berikut adalah tabel dari semua properti Flexbox yang Anda dapat terapkan ke wadah:

Properti	Deskripsi
display	Menentukan flex container
flex-direction	Menentukan arah item flex
flex-wrap	Menentukan apakah item flex harus melengkung
flex-flow	Ringkasan untuk flex-direction dan flex-wrap
justify-content	Menyusun item di sepanjang sumbu utama
align-items	Menyusun item di sepanjang sumbu silang
align-content	Menyusun baris flex ketika ada ruang ekstra di wadah

Properti Flexbox Items

Dan ini adalah properti yang Anda dapat terapkan ke item flex:

Properti	Deskripsi
order	Menentukan urutan item flex
flex-grow	Menentukan seberapa besar item flex akan tumbuh relatif ke yang lain
flex-shrink	Menentukan seberapa besar item flex akan menyusut relatif ke yang lain
flex-basis	Menentukan panjang awal item flex
flex	Ringkasan untuk flex-grow, flex-shrink, dan flex-basis
align-self	Menentukan penataan untuk item flex spesifik

Dan itu adalah! Anda telah mengambil langkah besar pertama Anda ke dunia CSS Flexbox. Ingat, seperti belajar menunggang sepeda, mungkin Anda merasa wobble di awal, tetapi dengan latihan, Anda akan mampu menunggang dengan cepat dalam waktu singkat.

Jangan takut untuk mencoba properti ini. Cara terbaik untuk belajar adalah dengan melakukan. Cobalah membuat tata letak yang berbeda, mainkan properti, dan lihat apa yang terjadi. Sebelum Anda sadari, Anda akan menciptakan tata letak cantik, fleksibel dengan mudah!

Selamat flexing, para maestro CSS masa depan!

Credits: Image by storyset