PENGENALAN FLEXBOX

Flexbox atau Flexible Box adalah model layout yang berorientasi pada satu dimensi untuk membuat tata letak yang lebih kompleks dan elegan dalam desain responsif.

Ikuti artikel interaktif membuat layout dengan flexbox

Flexbox mudah digunakan, khususnya dalam hal penyesuaian tampilan elemen-elemen HTML di berbagai ukuran layar atau jendela.

Pengunaan Flexbox

Untuk menggunakan Flexbox, kamu harus menentukan elemen induk sebagai flex container. Elemen-elemen anak dari flex container ini akan menjadi flex items.

Berikut adalah cara untuk menjadikan sebuah elemen sebagai flex container:

.container {
  display: flex;
}

Ketika sebuah elemen telah menjadi flex container, ada serangkaian properti yang dapat digunakan untuk mengatur tata letak dan perilaku flex items.

Properti-Properti Flexbox

flex-direction

Properti flex-direction menentukan arah layout flex items. Ada empat nilai yang bisa digunakan: row, row-reverse, column, column-reverse.

.container {
  flex-direction: row;
}

justify-content

Properti justify-content digunakan untuk menyesuaikan posisi flex items pada sumbu utama flex container. Ada lima nilai yang bisa digunakan: flex-start, flex-end, center, space-between, space-around.

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

align-items

Properti align-items digunakan untuk menyesuaikan posisi flex items pada sumbu lintang flex container. Ada lima nilai yang bisa digunakan: stretch, flex-start, flex-end, center, baseline.

.container {
  align-items: center;
}

flex-wrap

Properti flex-wrap digunakan untuk menentukan apakah flex items sebaiknya membungkus atau tidak ketika tidak ada cukup ruang dalam satu baris flex container.

.container {
  flex-wrap: wrap;
}

Flexbox merupakan salah satu model layout yang sering digunakan oleh pengembang front-end dalam membangun berbagai jenis antarmuka interaktif. Penggunaan flexbox cukup luas seperti untuk mengatur posisi, penyesuaian ukuran, dan penataan elemen visual yang ada di dalam sebuah website.