LAYOUT DENGAN FLEXBOX

Layout adalah bagian penting dalam pengembangan web. Memahami cara membuat layout yang responsif dan fleksibel dapat membuat situs web lebih user-friendly dan profesional. Salah satu cara memanfaatkan layout adalah dengan menggunakan flexbox dalam CSS.

Apa itu Flexbox?

Flexbox, atau flexible box, adalah model layout satu dimensi dalam CSS yang membuat item dalam container bisa fleksibel dalam hal ukuran dan urutan. Ini berarti item dalam container bisa menyesuaikan ukurannya sendiri dan mengisi ruang kosong jika ada.

Cara Kerja Flexbox

Konsep utama flexbox adalah kemampuan mengubah lebar dan tinggi elemen dalam container untuk menyesuaikan ruang yang tersisa. Dalam beberapa kasus, flexbox bahkan dapat mengubah urutan elemen.

Untuk memulai dengan flexbox, kamu harus mengatur elemen container dengan CSS property display dengan nilai flex atau inline-flex.

.container {
  display: flex;
}

Dengan cara ini, semua anak elemen langsung menjadi flex items.

Mengatur Arah Flex Items

CSS flexbox memberikan kita kontrol atas arah dimana flex items harus diletakkan dengan properti flex-direction. Nilai default dari flex-direction adalah row, yang berarti semua anak elemen atau flex items akan ditempatkan secara horizontal.

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

Jika kamu ingin mengubah arah flex items menjadi vertikal, kamu bisa menggunakan column sebagai nilai flex-direction.

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

Menyusun Flex Items

Salah satu kelebihan lain dari menggunakan flexbox adalah kemampuan untuk menyusun flex items secara mudah. Properti justify-content memungkinkan kamu untuk mengatur penataan flex items di sepanjang sumbu utama (horizontal jika flex-direction adalah row, dan vertikal jika flex-direction adalah column).

.container {
  display: flex;
  justify-content: center; 
}

Dalam kode di atas, semua flex items akan ditempatkan di tengah container.

Kesimpulan

Flexbox adalah alat sederhana dan fleksibel dalam CSS yang membuat layout web menjadi lebih mudah dan efektif. Dengan mengenali dan menguasai beberapa properti dasar, kamu sudah dapat menciptakan layout yang responsif dan profesional. Selamat mencoba!