Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Kontrol Item Flex: Memahami Grow, Shrink, dan Basis

Bayangkan Anda memiliki sebuah kotak (kontainer) dan tiga buah balon di dalamnya. Properti ini menentukan seberapa besar balon-balon tersebut akan mengembang atau mengempis untuk memenuhi kotak tersebut.

1. Flex-Basis (Ukuran Awal)

flex-basis menentukan ukuran awal sebuah elemen sebelum sisa ruang didistribusikan.

• Nilai: Bisa berupa px, %, em, atau auto (default).

• Fungsi: Jika flex-direction adalah row, maka flex-basis menentukan lebar. Jika column, maka ia menentukan tinggi.

2. Flex-Grow (Kemampuan Tumbuh)

Properti ini menentukan kemampuan sebuah elemen untuk membesar mengisi sisa ruang kosong di dalam kontainer.

• Nilai: Angka tanpa satuan (Default adalah 0, yang berarti tidak tumbuh).

• Logika: Jika semua item memiliki flex-grow: 1, maka sisa ruang akan dibagi rata. Jika salah satu item memiliki flex-grow: 2, ia akan mengambil ruang kosong dua kali lebih banyak dibanding yang lain.

3. Flex-Shrink (Kemampuan Menyusut)

Properti ini menentukan bagaimana elemen mengecil jika ruang di dalam kontainer tidak mencukupi.

• Nilai: Angka tanpa satuan (Default adalah 1, yang berarti boleh menyusut).

• Logika: Nilai 0 akan mencegah elemen menyusut (elemen akan tetap pada ukuran aslinya meskipun meluap dari kontainer).

4. Properti Shorthand: flex

Sangat disarankan untuk menggunakan shorthand flex daripada menuliskan ketiganya secara terpisah.

Sintaks: fle x: [grow] [shrink] [basis];

Contoh Umum:

• flex: 1; (Sama dengan flex: 1 1 0%). Elemen akan tumbuh memenuhi ruang.

• flex: 0 0 200px; (Sama dengan lebar tetap 200px, tidak tumbuh, tidak menyusut).

Tutorial: Membuat Layout Sidebar dan Konten

Mari kita terapkan pada portal SatuMedia untuk membuat area konten utama yang fleksibel dengan sidebar yang ukurannya tetap.

Struktur HTML

<div class="main-layout"> <aside class="sidebar">Sidebar (Tetap)aside> <main class="content">Konten Utama (Fleksibel)main>
div>

Kode CSS

.main-layout { display: flex; gap: 20px;
} .sidebar { /* Tidak tumbuh, tidak menyusut, ukuran dasar 250px */ flex: 0 0 250px; background-color: #f4f4f4; padding: 20px;
} .content { /* Tumbuh mengisi sisa ruang, boleh menyusut, ukuran dasar 0 */ flex: 1; background-color: #ffffff; padding: 20px; border: 1px solid #ddd;
}

Tips Pro untuk Developer

1. Gunakan Flex: 1 untuk Form: Saat membuat form pencarian, berikan flex: 1 pada elemen dan biarkan tombol memiliki ukuran alaminya. Ini akan membuat input selalu memenuhi sisa baris.

    

2. Mencegah Gambar Penyet: Seringkali gambar di dalam flexbox menyusut secara tidak proporsional. Memberikan flex-shrink: 0 pada elemen pembungkus gambar akan menjaga ukurannya tetap stabil.

3. Flex-basis vs Width: Jika Anda menggunakan Flexbox, lebih baik gunakan flex-basis daripada width. flex-basis lebih fleksibel karena ia bekerja secara cerdas mengikuti arah flex-direction.