Skip to content
Kuliah Coding

CSS Flexbox

Flexbox, salah satu teknik layout paling powerful dan fleksibel dalam CSS modern. Cocok banget buat kamu yang ingin membuat layout responsif dan sejajar dengan mudah, tanpa pusing mikirin float atau margin manual.

Apa Itu Flexbox?

Section titled “Apa Itu Flexbox?”

Flexbox adalah model layout 1 dimensi yang digunakan untuk mengatur elemen dalam baris (horizontal) atau kolom (vertikal) dengan mudah, cepat, dan fleksibel.

Cara Mengaktifkan Flexbox

Section titled “Cara Mengaktifkan Flexbox”

Untuk mengaktifkan Flexbox, cukup beri properti display: flex; pada container (elemen induk).

.container {
  display: flex;
}

Struktur Flexbox

Section titled “Struktur Flexbox”

Berikut ini struktur flexbox yang sering digunakan di html dan css.

Kode html:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Kode css:

.container {
  display: flex;
}

Keterangan:

  • .container → disebut flex container
  • .item → disebut flex items

Properti Flex Container

Section titled “Properti Flex Container”

Properti Flex Container memiliki beberapa properti lain yang mendukungnya. Beberapa properti lain yang mendukung flex container adalah sebagai berikut:

1. flex-direction

Section titled “1. flex-direction”

Fungsinya menentukan arah utama dari item apakah horizontal (ke samping) atau vertikal (ke bawah).

Berikut ini beberapa value yang dimiliki oleh properti flex-direction:

NilaiArah
rowDefault: kiri ke kanan
row-reverseKanan ke kiri
columnAtas ke bawah
column-reverseBawah ke atas

Contoh:

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

2. justify-content

Section titled “2. justify-content”

Fungsinya mengatur posisi item secara horizontal (sumbu utama).

Berikut ini beberapa value yang dimiliki oleh properti justify-content:

NilaiFungsi
flex-startRapat kiri (default)
flex-endRapat kanan
centerTengah
space-betweenSpasi antar item
space-aroundSpasi kiri dan kanan item sama rata

Contoh:

.container {
  justify-content: center;
}

3. align-items

Section titled “3. align-items”

Fungsinya mengatur posisi item secara vertikal (sumbu silang).

Berikut ini merupakan beberapa value yang dimiliki oleh properti align-items:

NilaiFungsi
stretchMemenuhi tinggi container (default)
flex-startRapat atas
flex-endRapat bawah
centerTengah secara vertikal

Contoh:

.container {
  align-items: center;
}

Properti Flex Item

Section titled “Properti Flex Item”

Properti Flex Item juga memiliki beberapa properti lain yang mendukungnya. Beberapa properti lain yang mendukung flex item adalah sebagai berikut:

1. flex-grow

Section titled “1. flex-grow”

Fungsinya menentukan seberapa besar item bisa memperluas ruang kosong.

Contoh:

.item {
  flex-grow: 1;
}

2. flex-shrink

Section titled “2. flex-shrink”

Fungsinya menentukan apakah item boleh mengecil jika ruang tidak cukup.

Contoh:

.item {
  flex-shrink: 1;
}

3. flex-basis

Section titled “3. flex-basis”

Fungsinya menentukan ukuran awal item sebelum ruang dibagi.

Contoh:

.item {
  flex-basis: 200px;
}

Shorthand: flex

Section titled “Shorthand: flex”

Penulisan flex-grow, flex-shrink, dan flex-basis dapat digabung menggunakan properti flex.

Contoh:

.item {
  flex: 1;
}

Contoh kode lengkap Flexbox Sederhana

Section titled “Contoh kode lengkap Flexbox Sederhana”

Berikut ini adalah contoh penulisan kode lengkap penggunakan flexbox.

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f0f0f0;
      padding: 20px;
    }


    .item {
      background-color: #2196f3;
      color: white;
      padding: 20px;
      width: 100px;
      text-align: center;
    }
  </style>
</head>
<body>


  <div class="container">
    <div class="item">Box 1</div>
    <div class="item">Box 2</div>
    <div class="item">Box 3</div>
  </div>


</body>
</html>

Hasilnya:

css-flexbox

Kapan Menggunakan Flexbox?

Section titled “Kapan Menggunakan Flexbox?”

Gunakan Flexbox saat kamu ingin:

  • Menyusun elemen dalam satu baris atau kolom
  • Membuat layout responsif dan fleksibel
  • Menengahkan elemen secara horizontal dan/atau vertikal
  • Mengatur jarak antar elemen otomatis

Tips Belajar Flexbox

Section titled “Tips Belajar Flexbox”
  • Gunakan Flexbox Froggy untuk latihan sambil bermain 🎮
  • Buka developer tools di browser dan eksperimen dengan display: flex
  • Mulai dari layout sederhana (sejajarkan 2–3 elemen)

Kesimpulan

Section titled “Kesimpulan”

Flexbox membuat layout web:

  • Lebih mudah diatur
  • Lebih responsif
  • Lebih rapi & fleksibel