Belajar CSS Part 5: Flexbox Layout

Setelah memahami Box Model & Pengaturan Layout di Part 4, sekarang kita akan mendalami layout CSS menggunakan: Flexbox.

Di Part 5 ini, kamu akan belajar tentang:

• Bagaimana Flexbox bekerja dalam layout CSS
• Properti-properti dasar Flexbox untuk penataan elemen
• Membuat layout responsif dengan Flexbox

Apa Itu Flexbox?

Flexbox adalah sistem layout CSS yang memungkinkan kita untuk mendistribusikan ruang di dalam elemen container dan menyusun elemen-elemen di dalamnya dengan cara yang lebih fleksibel dan responsif.

Flexbox sangat berguna untuk desain modern, terutama pada layout yang memerlukan responsivitas dan distribusi ruang yang efisien.

Flexbox Container dan Flex Items

Untuk menggunakan Flexbox, kita perlu mengatur elemen induk (container) dan elemen anak (items). Container diatur dengan properti display: flex;, dan items di dalamnya akan mengikuti aturan Flexbox.

Flexbox adalah sistem layout di CSS yang digunakan untuk mengatur posisi dan ukuran elemen agar lebih fleksibel dan rapi.

Untuk menggunakan Flexbox, kita perlu:

1. Flex Container → elemen induk

2. Flex Items → elemen anak di dalam container

Container diaktifkan dengan:

.container {
  display: flex;
}

Semua elemen di dalam .container otomatis menjadi flex items

Artinya:

• Elemen anak akan tersusun secara horizontal (default)

• Mereka akan berada dalam satu baris

• Lebih mudah diatur posisi dan jaraknya

.container {
  display: flex;
  background-color: #1f2937; /* dark slate */
  padding: 10px;
}

.item {
  background-color: white;
  padding: 20px;
  margin: 5px;
}

Penjelasan Contoh

• .container → menjadi flex container

• .item → menjadi flex items

• Item otomatis tersusun sejajar ke samping

• Margin memberi jarak antar item

Default Behavior Flexbox

Secara default:

• Arah susunan → row (horizontal)

• Item tidak turun ke bawah

• Ukuran mengikuti isi

Setelah mengaktifkan Flexbox pada container, elemen-elemen anaknya akan otomatis menjadi flex items yang dapat kita atur posisinya.

Properti Flexbox untuk Container

1. justify-content

Properti justify-content digunakan untuk mengatur distribusi ruang di sepanjang sumbu utama (horizontal, secara default). Beberapa nilai yang umum:

• flex-start – menyusun elemen dari kiri
• center – menyusun elemen di tengah
• space-between – memberi ruang antar elemen
• space-around – memberi ruang antar elemen dengan ruang lebih besar di luar elemen

justify-content di Flexbox

Properti justify-content digunakan untuk mengatur distribusi ruang di sepanjang sumbu utama (main axis).

Secara default, sumbu utama adalah horizontal (kiri → kanan) karena flex-direction default adalah row.

Contoh:

.container {
  display: flex;
  justify-content: center;
}

Artinya:

Semua flex items akan berada di tengah secara horizontal

.container {
  display: flex;
  justify-content: center;
  background-color: #1f2937; /* dark slate */
  padding: 20px;
}

.item {
  background-color: white;
  padding: 20px;
  margin: 5px;
}

Gambaran Visual Sederhana justify-content

Misalnya ada 3 item:

flex-start:
[1][2][3]--------

center:
----[1][2][3]----

space-between:
[1]----[2]----[3]

space-around:
--[1]--[2]--[3]--
	

Ringkasan Singkat

justify-content mengatur posisi item di arah horizontal (default).

Mengatur jarak dan distribusi ruang
Bekerja di sepanjang main axis

Nilai-Nilai justify-content

Berikut nilai yang umum digunakan:

• flex-start

  Item disusun dari kiri (default).

  justify-content: flex-start;

  Semua elemen mulai dari kiri.

• center

  Item berada di tengah.

  justify-content: center;

  Semua elemen di tengah container.

• space-between

  Memberi jarak antar elemen.

  justify-content: space-between;

  Elemen pertama di kiri.
  Elemen terakhir di kanan.
  Ruang hanya di antara elemen.

• space-around

  Memberi ruang di sekitar elemen.

  justify-content: space-around;

  Setiap elemen punya ruang kiri & kanan.
  Ruang luar lebih kecil dibanding antar elemen.

2. align-items

Properti align-items digunakan untuk mengatur posisi elemen anak pada sumbu silang (vertikal). Beberapa nilai yang umum:

• flex-start – menyusun elemen di bagian atas
• center – menyusun elemen di tengah vertikal
• stretch – elemen akan membentang untuk mengisi ruang

Contoh HTML Lengkap + CSS

.container {
  display: flex;
  align-items: center;
  height: 200px;
  background-color: #1f2937; /* dark slate */
}

.item {
  background-color: white;
  padding: 20px;
  margin: 5px;
}

Penjelasan Contoh

• Container memiliki tinggi 200px

• align-items: center; membuat semua item berada di tengah secara vertikal

• Jika diganti flex-start, item akan berada di atas

• Jika stretch, item akan memenuhi tinggi container

Ringkasan Singkat

• justify-content → mengatur horizontal (main axis)

• align-items → mengatur vertikal (cross axis)

Keduanya sering dipakai bersama untuk membuat elemen tepat di tengah halaman.

Nilai-Nilai align-items

• flex-start

  Item berada di atas

  align-items: flex-start;

  Semua elemen rata atas

• center

  Item berada di tengah vertikal

  align-items: center;

  Semua elemen di tengah container secara vertikal

• stretch (default)

  Item membentang memenuhi tinggi container (jika tidak memiliki height tetap).

  align-items: stretch;

  Elemen otomatis menyesuaikan tinggi container

3. flex-direction

Properti flex-direction digunakan untuk mengatur arah sumbu utama, apakah elemen akan disusun secara horizontal atau vertikal. Beberapa nilai yang umum:

• row – elemen disusun horizontal (default)
• column – elemen disusun vertikal
• row-reverse – elemen disusun horizontal terbalik
• column-reverse – elemen disusun vertikal terbalik

• row (default)

  flex-direction: row;

  Elemen disusun horizontal (kiri → kanan)

• column

  flex-direction: column;

  Elemen disusun vertikal (atas → bawah)

• row-reverse

  flex-direction: row-reverse;

  Elemen disusun horizontal tapi terbalik

• column-reverse

  flex-direction: column-reverse;

  Elemen disusun vertikal tapi terbalik

.container {
  display: flex;
  flex-direction: column;
  background-color: #1f2937; /* dark slate */
  padding: 10px;
}

.item {
  background-color: white;
  padding: 20px;
  margin: 5px;
}

Penjelasan Contoh

• Container memiliki tinggi 200px

• align-items: center; membuat semua item berada di tengah secara vertikal

• Jika diganti flex-start, item akan berada di atas

• Jika stretch, item akan memenuhi tinggi container

Properti Flexbox untuk Flex Items

1. flex-grow

Properti flex-grow digunakan untuk menentukan seberapa banyak elemen flex item akan tumbuh untuk mengisi ruang kosong di dalam container. Nilai defaultnya adalah 0, artinya elemen tidak akan tumbuh.

.container {
  display: flex;
  width: 600px;
  background-color: #1f2937; /* dark slate */
}

.item {
  background-color: white;
  padding: 20px;
  margin: 5px;
  flex-grow: 1;
}

Penjelasan Contoh flex-grow

• Container lebar 600px

• Semua item punya flex-grow: 1

• Ketiganya membagi ruang kosong secara merata

Jika salah satu diubah menjadi:

Item tersebut akan lebih besar.

Ringkasan Singkat flex-grow

• flex-grow: 0; → tidak membesar (default)

• flex-grow: 1; → membesar untuk isi ruang kosong

• Angka menentukan rasio pertumbuhan

Cocok untuk membuat layout responsif tanpa hitung manual lebar.

2. flex-shrink

Properti flex-shrink digunakan untuk menentukan seberapa banyak elemen flex item akan mengecil ketika ruang di dalam container terbatas. Nilai defaultnya adalah 1, yang berarti elemen dapat mengecil.

.container {
  display: flex;
  width: 300px;
  background-color: #1f2937; /* dark slate */
}

.item {
  width: 150px;
  padding: 20px;
  background-color: white;
  margin: 5px;
  flex-shrink: 1; /* coba ganti jadi 0 */
}

Perbandingan Nilai flex-shrink

• flex-shrink: 1; → boleh mengecil (default)

• flex-shrink: 0; → tidak boleh mengecil

• flex-shrink: 2; → mengecil dua kali lebih cepat dibanding 1

Ringkasan Singkat

• flex-grow → mengatur pembesaran

• flex-shrink → mengatur pengecilan

• Keduanya bekerja berdasarkan rasio angka

Digunakan untuk membuat layout tetap rapi saat layar mengecil (responsive).

3. flex-basis

Properti flex-basis digunakan untuk menentukan ukuran dasar elemen flex item sebelum ruang yang tersisa dibagi.

.container {
  display: flex;
  width: 800px;
  background-color: #1f2937; /* dark slate */
}

.item {
  flex-basis: 200px;
  flex-grow: 1;
  margin: 5px;
  padding: 20px;
  background-color: white;
}

Penjelasan flex-grow

• Setiap item mulai dari 200px

• Jika ada ruang lebih → dibagi rata karena flex-grow: 1

Contoh Layout Flexbox: Menu Navigasi

Misalnya, kita akan membuat menu navigasi menggunakan Flexbox:

.navbar {
  display: flex;
  justify-content: center;
}

.menu {
  display: flex;
  list-style-type: none;
}

.menu li {
  margin: 0 10px;
}

Contoh Menu Navigasi Yang Sudah Di Styling

/* === Selamat Mencoba! === */

Kesalahan Umum dengan Flexbox

• Melupakan properti flex-wrap saat elemen fleksibel tidak muat dalam satu baris
• Kesalahan dalam menentukan arah sumbu utama dengan flex-direction
• Terlalu banyak menggunakan flex-grow dan mengabaikan desain yang responsif

Ringkasan CSS Part 5

• Flexbox adalah sistem layout yang fleksibel dan responsif
• Gunakan justify-content dan align-items untuk mengatur posisi elemen
• Kontrol ukuran dan fleksibilitas elemen dengan flex-grow, flex-shrink, dan flex-basis

Lanjutan Materi

Di CSS Part 6, kita akan membahas:

• Layout Grid – Membuat desain grid responsif
• Lebih mendalam tentang penggunaan grid untuk layout kompleks

Lanjut ke: Belajar CSS Part 6