|

Belajar CSS Flexbox dengan 5 Latihan Praktis: Dijamin Langsung Paham!

ByMukhlis MJ

Halo, teman-teman kreatif! Kalau kamu sudah pernah ngoding layout web pakai float, inline-block, atau bahkan position absolute, kamu pasti tahu betapa ribetnya mengatur elemen supaya rapi sejajar. Nah, sejak munculnya Flexbox, dunia CSS jadi jauh lebih waras. Serius, properti ini seperti “penyelamat” buat para desainer front-end yang sering pusing nyari cara supaya layout nggak berantakan.

Belajar CSS Flexbox dengan 5 Latihan Praktis: Dijamin Langsung Paham!

Artikel ini saya tulis setelah nonton ulang salah satu seri legendaris dari Sandhika Galih di channel Web Programming UNPAS—ya, dosen favorit sejuta umat itu. Di video tersebut beliau membahas lima latihan sederhana tapi sangat berguna untuk memahami cara kerja Flexbox secara nyata. Jadi daripada kamu nonton sambil skip-skip, mending saya buatin versi tulisannya aja. Siap? Yuk kita mulai.

Sedikit Pengantar: Apa Itu Flexbox?

Flexbox, atau Flexible Box Layout, adalah sistem layout di CSS yang didesain untuk membuat tata letak elemen menjadi fleksibel dan mudah diatur. Tujuannya simpel: kamu bisa menata elemen secara horizontal atau vertikal tanpa harus ribet ngitung lebar manual atau pakai float ke sana-kemari.

Bayangin aja, dulu kalau mau bikin tiga kolom sejajar, kita harus ngatur lebar tiap kolom, tambahin clearfix, dan berharap nggak ada bug di browser. Sekarang cukup tulis satu baris:

display: flex;

…dan voilà! Semua elemen anak langsung sejajar.

Dunia terasa lebih indah.

Persiapan Awal

Sebelum latihan, pastikan kamu punya dua file:

  • index.html

  • style.css

Di HTML, cukup tulis struktur dasar seperti ini:

HTML
 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Lalu kita isi kontennya di dalam <body>. Semua latihan nanti pakai struktur sederhana aja biar fokus ke konsepnya.

Latihan 1: Membuat Layout Tiga Kolom

Ini latihan paling dasar tapi sangat penting. Bayangkan kamu mau bikin halaman utama seperti layout Facebook: kiri untuk navigasi, tengah buat konten utama, dan kanan untuk iklan atau informasi tambahan.

HTML-nya bisa seperti ini:

HTML 
    <div class="container-1">
  <div class="sidebar-1">Sidebar 1</div>
  <div class="main">
    <h2>Judul Artikel</h2>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class="sidebar-2">Sidebar 2</div>
</div>

Sekarang CSS-nya:

CSS 
    .container-1 {
  display: flex;
  width: 800px;
  margin: 50px auto;
  background-color: white;
  box-sizing: border-box;
}

.main {
  flex: 3;
  background-color: #f5f5f5;
  padding: 10px;
}

.sidebar-1,
.sidebar-2 {
  flex: 1;
  background-color: #ddd;
  padding: 10px;
}

Dengan satu baris display: flex, ketiga kolom langsung sejajar. Properti flex di sini menentukan rasio lebar antar elemen.

Jadi flex: 3 artinya kolom tengah lebarnya tiga kali lebih besar daripada sidebar.

Kalau kamu pengen ubah urutannya, cukup tambahkan:

CSS 
    order: 2;

Maka urutan tampilannya langsung berubah tanpa perlu mindah kode di HTML.

Keren, kan?

Latihan 2: Membuat Section Layanan yang Responsif

Kali ini kita bikin layout seperti bagian services di website perusahaan — tiga kolom sejajar yang otomatis berubah jadi vertikal kalau dibuka di HP.

HTML:

HTML 
    <div class="container-2">
  <div class="layanan satu">
    <h4>Layanan Satu</h4>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class="layanan dua">
    <h4>Layanan Dua</h4>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class="layanan tiga">
    <h4>Layanan Tiga</h4>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</div>

CSS:

CSS 
    .container-2 {
  display: flex;
  justify-content: space-between;
  max-width: 800px;
  margin: 50px auto;
}

.layanan {
  width: 30%;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 10px;
  color: #fff;
}

.layanan.satu { background-color: #42a5f5; }
.layanan.dua { background-color: #66bb6a; }
.layanan.tiga { background-color: #ef5350; }

/* Responsif */
@media (max-width: 600px) {
  .container-2 {
    flex-direction: column;
  }
  .layanan {
    width: 100%;
    margin-bottom: 20px;
  }
}

Begitu jendela browser dikecilin, kolom otomatis turun ke bawah.

Nggak perlu plugin atau framework — cukup Flexbox dan satu media query.

Latihan 3: Membuat Galeri Gambar yang Rapi dan Responsif

Siapa bilang bikin galeri harus pakai grid? Flexbox juga bisa!

HTML:

HTML 
    <div class="container-3">
  <div class="thumbnail"><img src="img1.jpg" alt=""></div>
  <div class="thumbnail"><img src="img2.jpg" alt=""></div>
  <div class="thumbnail"><img src="img3.jpg" alt=""></div>
  <div class="thumbnail"><img src="img4.jpg" alt=""></div>
  <div class="thumbnail"><img src="img5.jpg" alt=""></div>
  <div class="thumbnail"><img src="img6.jpg" alt=""></div>
</div>

CSS:

CSS 
    .container-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 800px;
  margin: 50px auto;
}

.thumbnail {
  width: 25%;
  padding: 10px;
  box-sizing: border-box;
}

.thumbnail img {
  width: 100%;
  border-radius: 10px;
}

/* Responsif */
@media (max-width: 600px) {
  .thumbnail {
    width: 50%;
  }
}

Di layar besar, ada empat gambar per baris. Saat dibuka di HP, otomatis jadi dua per baris.

Semuanya tetap sejajar, rapi, dan responsif.

Kalau kamu ingin jarak antar gambar lebih presisi, kamu bisa ganti justify-content: center; jadi space-between; biar gambar kiri dan kanan nempel ke tepi dengan jarak rata.

Latihan 4: Membuat Pricing Card (Daftar Harga)

Sekarang bagian yang sering banget muncul di landing page: kartu harga atau pricing card. Biasanya ada tiga kartu — Basic, Standard, dan Premium — dengan tampilan yang menarik.

HTML:

HTML 
    <div class="container-4">
  <div class="card">
    <div class="header"></div>
    <div class="body">
      <p>Paket Basic</p>
      <button>Beli Sekarang</button>
    </div>
  </div>
  <div class="card besar">
    <div class="header"></div>
    <div class="body">
      <p>Paket Pro</p>
      <button>Beli Sekarang</button>
    </div>
  </div>
  <div class="card">
    <div class="header"></div>
    <div class="body">
      <p>Paket Premium</p>
      <button>Beli Sekarang</button>
    </div>
  </div>
</div>

CSS:

CSS 
    .container-4 {
  display: flex;
  justify-content: center;
  max-width: 800px;
  margin: 50px auto;
}

.card {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  background-color: #f9f9f9;
  transition: transform 0.3s ease;
}

.card.besar {
  transform: scale(1.15);
  background-color: #fff;
}

.header {
  height: 150px;
  background-color: #e0e0e0;
  border-radius: 10px 10px 0 0;
}

.body {
  padding: 20px;
  text-align: center;
}

button {
  padding: 10px 20px;
  background-color: #42a5f5;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

Kartu di tengah diperbesar dengan transform: scale(1.15) supaya tampak menonjol.

Efek sederhana tapi efektif banget buat menarik perhatian pengunjung.

Kalau mau lebih dinamis, kamu juga bisa tambahkan efek hover:

CSS 
    .card:hover {
  transform: scale(1.1);
}

Latihan 5: Menempatkan Elemen di Tengah Layar

Kedengarannya simpel, tapi hampir semua developer pernah frustasi gara-gara hal ini:

“Gimana cara menaruh elemen tepat di tengah halaman?”

Flexbox menjawab dengan elegan.

HTML:

HTML 
    <div class="container-5">
  <div class="kotak">
    <span>Hello World</span>
  </div>
</div>

CSS:

CSS 
    .container-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  border: 5px solid #000;
}

.kotak {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  background-color: brown;
  color: white;
  border-radius: 10px;
}

Selesai. Tanpa kalkulasi aneh, tanpa transform: translate(-50%, -50%).

Cukup display: flex; justify-content: center; align-items: center; — dan elemen langsung berada di tengah sempurna, baik horizontal maupun vertikal.

Kenapa Flexbox Begitu Penting?

Flexbox bukan sekadar fitur “baru” di CSS. Ia adalah pondasi dari layout modern. Bahkan framework populer seperti Bootstrap, Tailwind, atau Bulma semuanya berdiri di atas sistem Flexbox.

Dengan Flexbox, kamu bisa:

  • Mengatur urutan elemen tanpa ubah HTML

  • Membuat layout dinamis tanpa hitung lebar manual

  • Menyusun komponen jadi responsif dengan mudah

  • Menghindari bug float yang sering bikin stres

Tips Belajar Flexbox Lebih Cepat

  1. Gunakan Visual Playground

    Coba situs seperti Flexbox Froggy atau [Flexbox.io].

    Kamu akan belajar konsepnya sambil main game — serius, ini cara paling asyik.

  2. Pahami Properti Inti

    Jangan hafal semua sekaligus. Fokus aja ke lima yang paling sering dipakai:

    • display: flex

    • justify-content

    • align-items

    • flex-wrap

    • order

  3. Eksperimen di Proyek Nyata

    Coba ganti layout lama yang masih pakai float jadi Flexbox.

    Dari situ kamu akan tahu manfaatnya secara langsung.

Kesimpulan

Flexbox bukan lagi hal baru, tapi masih sering disalahpahami. Padahal dengan memahami dasarnya, kamu bisa bikin layout rapi, responsif, dan mudah diatur tanpa ribet. Lima latihan di atas hanyalah pintu awal. Setelah ini, kamu bisa eksplorasi lebih jauh — misalnya menggabungkannya dengan CSS Grid untuk layout yang lebih kompleks.

Jadi, kalau kamu selama ini masih trauma dengan float dan margin ajaib, saatnya move on.

Flexbox hadir untuk bikin hidup para desainer dan front-end dev jadi jauh lebih tenang.

Selamat bereksperimen, dan seperti kata Sandhika Galih:

“Jangan lupa titik koma dulu.”

VIDEO PAK SANDHIKA

Atau teman-teman bisa nonton video berikut ini :

.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;

}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

Similar Posts