Belajar CSS Flexbox: Biar Layout Web Nggak Berantakan

Kenapa Kita Membutuhkan Flexbox?#

Perhatikan HTML berikut:

1
<div class="profil">
2
  <img src="foto-profil.jpg" alt="Foto profil BapakGabut">
3
  <div>
4
    <h2>BapakGabut</h2>
5
    <p>Ngoding, main game, dan ngulik apa saja.</p>
6
  </div>
7
</div>

Secara default, elemen <div> merupakan elemen block. Artinya, elemen tersebut biasanya mengambil ruang selebar area yang tersedia dan dimulai pada baris baru.

Karena itu, bagian informasi profil cenderung muncul di bawah foto, bukan otomatis di sebelahnya.

Padahal yang kita inginkan kira-kira seperti ini:

1
+-------------------------------+
2
|             PROFIL            |
3
|                               |
4
|  +--------+  BapakGabut       |
5
|  |  FOTO  |  Ngoding, main    |
6
|  |        |  game, dan ngulik |
7
|  +--------+  apa saja.        |
8
+-------------------------------+

Kita bisa menggunakan berbagai teknik CSS untuk membuat layout tersebut, tetapi Flexbox menawarkan cara yang lebih praktis untuk menyusun dan meratakan elemen dalam satu arah.

Mengenal Flex Container dan Flex Item#

Flexbox adalah sistem layout CSS untuk mengatur elemen dalam satu dimensi: baris atau kolom.

Ada dua istilah yang perlu kita pahami:

• Flex container: elemen induk yang diberi display: flex.
• Flex item: elemen anak langsung dari flex container.

Contohnya:

1
<div class="kotak-induk">
2
  <div class="kotak">A</div>
3
  <div class="kotak">B</div>
4
  <div class="kotak">C</div>
5
</div>

1
.kotak-induk {
2
  display: flex;
3
}

Begitu display: flex diterapkan, ketiga kotak menjadi flex item dan secara default disusun dalam satu baris.

Perlu diperhatikan bahwa hanya anak langsung yang menjadi flex item. Elemen yang berada lebih dalam tidak otomatis menjadi flex item dari container tersebut.

Memahami Main Axis dan Cross Axis#

Sebelum mencoba berbagai properti, kita perlu memahami dua arah penting dalam Flexbox.

Main axis adalah sumbu utama tempat flex item disusun.

Cross axis adalah sumbu yang tegak lurus terhadap main axis.

Jika menggunakan flex-direction: row, main axis biasanya berjalan secara horizontal, sedangkan cross axis vertikal.

Jika menggunakan flex-direction: column, main axis berjalan secara vertikal, sedangkan cross axis horizontal.

Arah awal dan akhir sumbu juga dipengaruhi oleh arah penulisan halaman. Jadi, main axis tidak selalu berarti kiri ke kanan.

Kenapa ini penting?

Karena nantinya justify-content bekerja pada main axis, sedangkan align-items bekerja pada cross axis.

1. display: flex — Mengaktifkan Flexbox#

Mari mulai dari contoh sederhana.

1
<div class="container">
2
  <div class="item">HTML</div>
3
  <div class="item">CSS</div>
4
  <div class="item">JavaScript</div>
5
</div>

1
.container {
2
  display: flex;
3
  border: 2px solid #333;
4
  padding: 12px;
5
}
6

7
.item {
8
  background-color: #dbeafe;
9
  border: 1px solid #60a5fa;
10
  padding: 12px;
11
}

Hasilnya, ketiga item akan disusun berdampingan dalam satu baris selama ruangnya memungkinkan.

Tanpa display: flex, ketiga <div> biasanya tersusun secara vertikal karena perilaku block masing-masing.

Coba hapus display: flex, perhatikan perubahannya, kemudian pasang kembali.

Eksperimen sederhana ini membantu kita memahami apa yang sebenarnya dilakukan Flexbox.

2. flex-direction — Menentukan Arah Susunan#

Secara default, Flexbox menggunakan:

1
.container {
2
  display: flex;
3
  flex-direction: row;
4
}

Artinya, item disusun dalam satu baris mengikuti main axis.

Jika kita ingin item tersusun dari atas ke bawah, gunakan:

1
.container {
2
  display: flex;
3
  flex-direction: column;
4
}

Nilai lain yang tersedia adalah row-reverse dan column-reverse.

Namun, untuk tahap awal, cukup pahami row dan column terlebih dahulu.

Satu hal penting: mengubah urutan visual dengan CSS tidak otomatis mengubah urutan elemen pada HTML. Karena itu, tetap susun HTML dalam urutan yang masuk akal untuk pembaca dan pengguna keyboard.

3. justify-content — Mengatur Posisi pada Main Axis#

Bayangkan kita memiliki tiga kotak di dalam container yang cukup lebar.

Secara default, kotak-kotak tersebut berkumpul di bagian awal main axis.

Dengan justify-content, kita bisa mengatur bagaimana ruang yang tersedia dibagikan pada sumbu utama.

Contoh:

1
.container {
2
  display: flex;
3
  justify-content: center;
4
}

Ketiga kotak akan berkumpul di tengah main axis.

Beberapa nilai yang sering digunakan:

Contohnya:

1
.container {
2
  display: flex;
3
  justify-content: space-between;
4
}

Properti ini akan lebih mudah diamati ketika container memiliki ruang kosong yang cukup pada main axis.

4. align-items — Mengatur Posisi pada Cross Axis#

Kalau justify-content bekerja pada main axis, align-items bekerja pada cross axis.

Misalnya:

1
.container {
2
  display: flex;
3
  height: 180px;
4
  align-items: center;
5
}

Dengan flex-direction: row, item akan diratakan di tengah secara vertikal.

Nilai yang umum digunakan:

• stretch: item direntangkan pada cross axis jika ukurannya memungkinkan.
• flex-start: item berada di awal cross axis.
• center: item berada di tengah cross axis.
• flex-end: item berada di akhir cross axis.

Sekarang coba gabungkan:

1
.container {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
  height: 180px;
6
}

Jika arah Flexbox masih row, item akan berada di tengah secara horizontal dan vertikal.

Catatan: Jika kita mengubah flex-direction menjadi column, arah kerja kedua properti tersebut ikut berubah.

Inilah alasan kita perlu memahami main axis dan cross axis, bukan sekadar menghafal bahwa justify-content itu horizontal dan align-items itu vertikal.

5. gap — Memberikan Jarak Antarelemen#

Ketika item sudah berdampingan, biasanya kita ingin memberikan jarak yang konsisten.

Kita bisa menggunakan gap.

1
.container {
2
  display: flex;
3
  gap: 16px;
4
}

Hasilnya, terdapat jarak 16 piksel di antara flex item.

Keuntungan gap adalah kita tidak perlu memberikan margin pada setiap item hanya untuk membuat jarak antarelemen.

Perlu diingat, gap mengatur jarak di antara item, bukan padding pada tepi container.

Jika kita ingin memberi ruang antara isi dan batas container, gunakan padding, seperti yang sudah kita pelajari pada artikel Box Model.

6. flex-wrap — Ketika Ruang Tidak Cukup#

Sekarang bayangkan kita mempunyai banyak kartu yang disusun menggunakan Flexbox.

1
<div class="daftar-kartu">
2
  <div class="kartu">HTML</div>
3
  <div class="kartu">CSS</div>
4
  <div class="kartu">JavaScript</div>
5
  <div class="kartu">Node.js</div>
6
</div>

1
.daftar-kartu {
2
  display: flex;
3
  gap: 12px;
4
}
5

6
.kartu {
7
  width: 140px;
8
  padding: 16px;
9
  background-color: #e0f2fe;
10
}

Secara default, Flexbox menggunakan flex-wrap: nowrap.

Artinya, item berusaha tetap berada dalam satu baris. Ukurannya bisa menyusut ketika ruang tidak cukup.

Untuk mengizinkan item berpindah ke baris berikutnya, tambahkan:

1
.daftar-kartu {
2
  display: flex;
3
  flex-wrap: wrap;
4
  gap: 12px;
5
}
6

7
.kartu {
8
  flex: 0 0 140px;
9
  padding: 16px;
10
  background-color: #e0f2fe;
11
}

Dengan contoh ini, setiap kartu mempertahankan lebar dasar 140 piksel dan dapat berpindah ke baris berikutnya jika ruang tidak mencukupi.

Ini berguna untuk membuat kumpulan kartu, daftar menu, atau elemen lain yang jumlahnya bisa bertambah.

Namun, flex-wrap saja belum tentu cukup untuk membuat seluruh halaman nyaman di layar kecil. Kita akan membahas hal tersebut lebih lanjut pada artikel Responsive.

7. Praktik: Membuat Layout Profil BapakGabut#

Sekarang kita terapkan Flexbox pada contoh yang lebih nyata.

Kita akan membuat kartu profil dengan foto di sebelah kiri dan informasi di sebelah kanan.

1
<div class="kartu-profil">
2
  <img
3
    src="foto-profil.jpg"
4
    alt="Foto profil BapakGabut"
5
    class="foto-profil"
6
  >
7

8
  <div class="informasi-profil">
9
    <h2>BapakGabut</h2>
10
    <p>Ngoding, main game, dan ngulik apa saja.</p>
11
    <a href="#">Lihat Artikel</a>
12
  </div>
13
</div>

1
* {
2
  box-sizing: border-box;
3
}
4

5
.kartu-profil {
6
  display: flex;
7
  align-items: center;
8
  gap: 24px;
9

10
  max-width: 650px;
11
  padding: 24px;
12
  margin: 32px auto;
13

14
  border: 1px solid #d1d5db;
15
  border-radius: 12px;
16
  background-color: #f8fafc;
17
}
18

19
.foto-profil {
20
  width: 120px;
21
  height: 120px;
22
  flex-shrink: 0;
23
  object-fit: cover;
24
  border-radius: 50%;
25
}
26

27
.informasi-profil {
28
  min-width: 0;
29
}
30

31
.informasi-profil h2 {
32
  margin-top: 0;
33
}
34

35
.informasi-profil p {
36
  line-height: 1.6;
37
}

8. Kesalahan Umum Saat Belajar Flexbox#

1
.container {
2
  display: flex;
3
  justify-content: center;
4
}

9. Latihan Mandiri#

Sekarang giliran Gabuters mencoba.

Gunakan kartu profil tadi, lalu lakukan beberapa perubahan berikut:

1. Ubah flex-direction dari row menjadi column. Perhatikan perubahan susunannya.
2. Coba justify-content: center dan justify-content: space-between pada container yang memiliki ruang kosong.
3. Ubah nilai gap menjadi 8px, 16px, dan 32px.
4. Tambahkan beberapa kartu baru dan gunakan flex-wrap: wrap.
5. Coba perbesar dan perkecil jendela browser. Amati kapan susunan elemen mulai terasa kurang nyaman.

Tidak masalah kalau hasilnya belum sempurna.

Justru dengan mencoba mengubah properti satu per satu, kita bisa memahami hubungan antara aturan CSS dan tampilan di browser.

10. Selanjutnya: CSS Responsive#

Sekarang kita sudah tahu cara menyusun elemen dengan Flexbox.

Tetapi muncul pertanyaan baru.

Bagaimana jika kartu profil yang terlihat bagus pada laptop ternyata terlalu sempit ketika dibuka melalui ponsel?

Apakah kita perlu membuat dua halaman HTML yang berbeda?

Untungnya tidak.

Pada artikel berikutnya, kita akan belajar CSS Responsive, termasuk media query, supaya tampilan halaman bisa menyesuaikan ukuran layar.

Sampai jumpa di pembahasan berikutnya, Gabuters!