Kesulitan mengatur posisi elemen di laman website? CSS Flexbox hadir untuk membantumu merapikan posisinya. 

Kamu mungkin juga pernah ngerasa layout web itu cepat berantakan ketika kebutuhan makin kompleks, lalu kamu mulai pakai float, lalu tambal dengan position, lalu tambahin clearfix, dan akhirnya kamu sendiri lupa kenapa struktur itu bisa jalan.

Dari beberapa dokumentasi seperti MDN dan CSS-Tricks, problem ini memang umum terjadi karena pendekatan lama tidak dirancang untuk layout dinamis yang responsif.

Nah, Flexbox bisa jadi pendekatan terbaik untuk ini. Nantinya, kamu tidak perlu lagi fokus ke posisi elemen, tapi ke distribusi ruang dan hubungan antar elemen. 

Apa Itu Flexbox dalam CSS?

Flexbox adalah sistem layout satu dimensi yang fokus mengatur elemen dalam satu arah, baik horizontal maupun vertikal. 

Kamu cukup aktifkan display: flex, lalu semua child langsung masuk ke dalam mekanisme fleksibel yang bisa kamu kontrol dengan properti tertentu.

Yang bikin menarik, Flexbox tidak sekadar mengatur posisi, tetapi juga ukuran dan distribusi ruang. 

Jadi ketika container punya ruang sisa, elemen bisa otomatis membesar, atau justru mengecil ketika ruang terbatas. Ini membuat layout terasa lebih “hidup” karena menyesuaikan kondisi, bukan sekadar mengikuti aturan statis.

Bagaimana Cara Kerja CSS Flexbox? 

Flexbox bekerja lewat dua peran utama, yaitu container dan item. Kamu menetapkan parent sebagai flex container, lalu semua anaknya otomatis jadi flex item. Setelah itu, browser akan menghitung ulang layout berdasarkan aturan fleksibel.

Di sini, kamu harus paham dua sumbu utama. Pertama main axis sebagai arah utama layout, lalu cross axis sebagai arah pelengkap. 

Ketika kamu set flex-direction: row, maka main axis berjalan horizontal, dan cross axis otomatis vertikal. Berlaku juga untuk sebaliknya. 

Karena itu, hampir semua properti Flexbox selalu berkaitan dengan dua sumbu ini. justify-content mengatur posisi pada main axis, sedangkan align-items mengatur posisi pada cross axis. 

Jadi kalau kamu sudah paham dua konsep ini, kamu sebenarnya sudah pegang 70 persen kekuatan Flexbox.

4 Konsep Dasar Penggunaan CSS Flexbox

Sebelum mengutak-atik properti, baiknya perlu paham struktur dan arah CSS Flexbox lebih dulu: 

1. Flex Container

Flex container merupakan elemen induk yang mendapatkan properti display: flex. Elemen ini tugasnya mengatur bagaimana seluruh item di dalamnya akan tampil. 

Baik dalam satu baris maupun kolom. Dengan menjadikan suatu elemen sebagai container flexible, kamu bisa mengatur berbagai hal. 

Misalnya, mengatur arah, jarak antar item, dan juga alignment. 

2. Main Axis dan Cross Axis

Kamu menentukan arah layout lewat flex-direction, lalu secara otomatis kamu menentukan bagaimana elemen akan tersusun. Hal ini nantinya akan mempengaruhi cara properti lain bekerja.

3. Sifat Fleksibel Elemen

Kamu bisa mengatur elemen agar membesar dengan flex-grow, lalu mengecil dengan flex-shrink, dan menentukan ukuran awal lewat flex-basis. Jadi, elemen bisa adaptif terhadap ruang.

4. Distribusi Ruang Otomatis

Flexbox membagi ruang sisa secara dinamis, jadi kamu tidak perlu hitung manual, karena browser akan menyesuaikan berdasarkan aturan yang kamu tentukan.

6 Properti Utama dalam CSS Flexbox

Jika ingin memaksimalkan Flexbox CSS layout, maka kamu perlu tahu beberapa properti penting di dalamnya. Dengan menguasainya, website yang kamu desain bisa lebih rapi dan responsif tanpa perlu menulis kode tambahan terlalu banyak: 

1. display: flex

Kamu mengaktifkan Flexbox, lalu semua elemen langsung mengikuti sistem yang lebih fleksibel dan lebih mudah kamu atur.

2. flex-direction

Properti ini bisa membantumu menentukan arah layout. Dengan ini, kamu bisa memilih horizontal atau vertikal sesuai kebutuhan desain.

3. justify-content

Properti justify-content fungsinya menentukan agar setiap elemen sejajar di antara elemen lain secara horizontal. 

Intinya, di sini kamu mengatur posisi elemen sepanjang arah utama, lalu kamu bisa meratakan, memberi jarak, atau memusatkan elemen dengan mudah.

4. align-items

Kamu mengatur posisi elemen pada arah silang, sehingga elemen tetap sejajar dan tidak terlihat berantakan.

5. align-content

Properti ini, berguna untuk menentukan elemen dalam container agar sejajar secara vertikal di antara elemen lain. 

6. order

Terakhir, ada properti order. Fungsinya mengubah urutan dalam container flex. Kamu bisa mengurutkannya dari atas ke bawah atau awal hingga akhir. 

Contoh Penggunaan dan Implementasi CSS Flexbox

Jika ingin belajar, kamu bisa memulainya dengan contoh sederhana ini: 

Kamu bisa mulai dari contoh sederhana ini:

</> CSS

.container {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 300px;

  background: #f5f5f5;

}

.item {

  padding: 20px;

  background: #4CAF50;

  color: white;

  margin: 10px;

}

</> HTML

<div class=”container”>

  <div class=”item”>Item 1</div>

  <div class=”item”>Item 2</div>

  <div class=”item”>Item 3</div>

</div>

Dengan ini, kamu akan melihat elemen tersusun rapi, lalu berada di tengah, kemudian jarak antar elemen tetap konsisten. Dari sini, kamu bisa langsung terapkan ke kasus lain, misalnya navbar.

</> CSS

.navbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

Kamu langsung dapat layout dengan logo di kiri dan menu di kanan tanpa perlu trik tambahan. Ini yang bikin Flexbox terasa praktis, karena kamu bisa menyelesaikan banyak masalah layout dengan cara yang lebih cepat dan lebih bersih.

Setelah Layout Rapi, Saatnya Website Kamu Punya “Rumah” yang Stabil

Kalau sudah pegang kontrol layout melalui Flexbox, website kamu juga butuh tempat yang bikin semua itu benar-benar jalan tanpa hambatan. Karena percuma desain rapi kalau loading website lambat.

Solusinya, pertimbangkan Hosting Murah Indonesia dari Biznet Gio. Dengan hosting ini, kamu bisa mulai website dengan harga ringan, sudah pakai SSD, lalu ada SSL gratis, dan performanya cukup stabil buat kebutuhan awal.Website sudah mulai berkembang? Pertimbangkan Unlimited Hosting dari Biznet Gio. Dengan Unlimited Hosting dari Biznet Gio, kamu bisa kelola banyak website, email, dan database tanpa batas, lalu kamu tidak perlu khawatir soal resource.