FLEXBOX UNTUK LAYOUT RESPONSIVE

Flexbox atau Flexible Box merupakan model layout CSS yang sangat efektif dalam menangani perubahan ukuran dan pengaturan elemen, apalagi saat kita membuat layout responsive. Dalam tutorial ini, kita akan mempelajari cara menggunakan Flexbox untuk layout responsive.

Mengenal Flexbox

Flexbox memungkinkan kamu untuk mengatur posisi elemen dalam container secara dinamis sesuai dengan ukuran layar atau viewport. Dengan kata lain, Flexbox membantu kita untuk mendesain tata letak web yang bersifat responsif, yaitu tampilan yang bisa menyesuaikan diri dengan berbagai ukuran layar perangkat.

Fitur-fitur Flexbox

• Flexibility: Flexbox memberikan elemen-elemen fleksibilitas dalam mengubah dimensi mereka untuk mengisi ruang yang tersedia. Maksudnya, elemen-elemen bisa “meregang” untuk mengisi ruang kosong atau “menyusut” untuk mencegah overflow.
• Direction-agnostic: Flexbox lebih bersifat independen terhadap arah layout jika dibandingkan dengan layout berbasis block dan inline yang terbiasa dengan arah horizontal dan vertikal.

Membuat Layout Menggunakan Flexbox

Berikut ini adalah cara dasar penggunaan Flexbox untuk membuat layout responsive.

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

.item {
  flex: 1;
}

Dalam kode di atas, kita telah membuat sebuah container dengan sifat flex. Kemudian, properti flex-wrap: wrap; memungkinkan item untuk wrap atau pindah ke baris berikutnya jika tidak cukup ruang di baris sekarang. Properti flex: 1; pada item memberikan fleksibilitas kepada item tersebut untuk meregang dan menyusut sesuai dengan ruang yang ada.

Mengatur Arah dan Urutan Flex Items

Flexbox juga memberikan kemampuan untuk mengubah arah dan urutan item. Misalnya, kita bisa mengubah arah item menjadi kolom daripada baris atau mengubah urutan item.

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

.item1 {
  order: 2;
}

.item2 {
  order: 1;
}

Kode di atas menunjukkan bagaimana kita mengubah arah item menjadi kolom dengan properti flex-direction: column;. Properti order: memungkinkan kita mengubah urutan elemen. Dalam contoh ini, .item1 sekarang akan muncul setelah .item2.

Jadi, itu adalah cara dasar dalam menggunakan Flexbox untuk membuat layout responsive. Dengan memahami dan menguasai Flexbox, kamu akan memiliki kontrol yang baik atas layout CSS dan membuat tampilan aplikasi webmu lebih profesional dan mudah dipahami oleh pengguna.