CSS - Flexbox: Panduan untuk Pemula dalam Layout Kotak Fleksibel

Hai sana, para master CSS masa depan! Saya sangat senang menjadi panduanmu dalam perjalanan menarik ini ke dunia CSS Flexbox. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun tahun, saya bisa katakan bahwa Flexbox adalah salah satu alat game-changing yang akan membuat hidup desain webmu menjadi lebih mudah. mari kita masuk ke dalamnya!

Apa itu CSS Flexbox?

Imaginasi bahwa kamu sedang mengatur furnitur di dalam sebuah ruangan. Kamu ingin segalanya pas, tapi kamu juga ingin fleksibilitas untuk mudah memindahkan sesuatu. Itu tepat apa yang dilakukan CSS Flexbox untuk layout web! Ini adalah model layout yang memungkinkanmu untuk mendesain struktur layout yang responsif dan fleksibel tanpa menggunakan floats atau positioning.

Flexbox membuat hal ini mudah:

• Mengatur item secara vertikal dan horisontal
• Mengurutkan item tanpa mengubah HTML
• Membuat elemen wadah yang fleksibel

Elemen Flexbox

Sebelum kita mulai mengoding, mari kita pahami 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.

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

Layout 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 item flex di dalamnya. Properti display: flex; pada container adalah yang mengaktifkan Flexbox.

Layout Flexbox Vertikal

Ingin menempatkan item Anda secara vertikal? Itu mudah sekali!

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

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

Properti Justify Content Flexbox

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

Nilai	Deskripsi
flex-start	Item dipakai ke arah awal sumbu flex-direction
flex-end	Item dipakai ke arah akhir sumbu flex-direction
center	Item ditempatkan di tengah garis
space-between	Item dipersebar secara merata di garis
space-around	Item dipersebar secara merata dengan ruang seimbang di sekitar mereka

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

Ini akan menyebar item Anda secara merata di sepanjang container.

Properti Align Items Flexbox

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

Nilai	Deskripsi
stretch	Item diperpanjang untuk memenuhi container (default)
flex-start	Item ditempatkan di awal sumbu silang
flex-end	Item ditempatkan di akhir sumbu silang
center	Item ditempatkan di tengah sumbu silang
baseline	Item diatur sehingga garis dasar mereka beralign

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

Ini akan menengahkan semua item secara vertikal di dalam container.

Menengahkan Div menggunakan Flexbox

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

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

Properti Wrap Flexbox

kadang-kadang, Anda mungkin ingin item Anda melengkung ke baris berikutnya jika mereka tidak memenuhi ruang. 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 bila Anda ingin menengahkan item satu secara berbeda? align-self untuk pertolongan!

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

Ini menengahkan item kedua ke bawah container, tanpa menghiraukan item lainnya.

Properti Container Flexbox CSS

Berikut adalah tabel properti Flexbox yang Anda dapat terapkan ke container:

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	Menyelaraskan item flex di sumbu utama
align-items	Menyelaraskan item flex di sumbu silang
align-content	Menyelaraskan baris flex saat ada ruang ekstra di container

Properti Item Flexbox CSS

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 penempatan untuk item flex spesifik

Dan itu adalah! Anda baru saja mengambil langkah besar pertama ke dunia CSS Flexbox. Ingat, seperti belajar menunggang sepeda, mungkin merasakan sedikit berayun di awal, tapi dengan latihan, Anda akan segera berpacu dengan mudah.

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

Selamat berflex, master CSS masa depan!

Credits: Image by storyset