TIPS MENGGUNAKAN FLEXBOX

Flexbox, singkatan dari Flexible Box, adalah model layout CSS yang memudahkan dalam pengaturan layout dalam hal pengaturan arah, penyusunan baris, dan justifikasi konten. Berikut adalah beberapa tips untuk menggunakan Flexbox dengan efektif.

1. Memahami Properti Utama Flexbox

Ketika kamu menggunakan flexbox, ada dua jenis properti yang harus dicermati, yaitu: properti untuk container (parent element) dan item (child element). Properti untuk container meliputi display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, dan align-content. Properti untuk item adalah order, flex-grow, flex-shrink, flex-basis, flex, dan align-self.

2. Menentukan Arah Flex

Gunakan properti flex-direction untuk menentukan arah utama. Nilainya bisa berupa row, row-reverse, column, atau column-reverse. Sebagai contoh, jika kamu ingin elemen diatur secara vertikal, kamu bisa menggunakan flex-direction: column.

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

3. Mengatur Belokan Flex

Jika item flex lebih dari yang bisa ditampung oleh container, kamu perlu mengendalikan cara mereka belok. Dengan menggunakan flex-wrap, kamu bisa memutuskan apakah mereka harus tetap dalam satu baris (nowrap), diletakkan ke baris baru (wrap), atau belok ke arah yang berlawanan (wrap-reverse).

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

4. Menggunakan flex-grow dan flex-shrink

Properti flex-grow dan flex-shrink memungkinkan item flex untuk tumbuh dan menyusut relatif terhadap ruang yang tersedia di container. Misalnya, flex-grow: 1 berarti item akan tumbuh untuk mengisi ruang kosong di dalam container, sedangkan flex-shrink: 1 berarti item akan menyusut jika container kecil.

.item {
  flex-grow: 1;
  flex-shrink: 1;
}

5. Menggunakan flex-basis

flex-basis adalah properti yang menentukan ukuran default dari elemen sebelum ruang tersisa didistribusikan sesuai dengan flex-grow dan flex-shrink. Biasanya, flex-basis mengacu pada lebar utama, tetapi jika flex-direction: column, maka mengacu pada tinggi.

.item {
  flex-basis: 200px;
}

Menggunakan Flexbox dapat memudahkan pekerjaanmu dalam membuat layout website. Jangan ragu untuk bermain dan bereksperimen dengan properti Flexbox untuk lebih memahami cara kerjanya.