Flexbox: Mengatur Sumbu dengan Flex-Direction

Secara default, Flexbox akan mengatur elemen secara horizontal dalam satu baris. Namun, dengan flex-direction, Anda memegang kendali penuh atas orientasi layout tersebut.

1. Memahami Dua Sumbu Utama

Sebelum masuk ke nilai properti, Anda harus memahami dua istilah ini:

• Main Axis (Sumbu Utama): Sumbu searah dengan flex-direction. Properti justify-content bekerja di sini.

• Cross Axis (Sumbu Silang): Sumbu yang tegak lurus dengan Main Axis. Properti align-items bekerja di sini.

2. Nilai-Nilai Flex-Direction

A. Row (Default)

Elemen berbaris secara horizontal dari kiri ke kanan (atau kanan ke kiri pada bahasa Arab).

• Main Axis: Horizontal.

• Kegunaan: Navigasi menu, barisan kartu produk.

B. Row-Reverse

Elemen berbaris secara horizontal, tetapi urutannya dibalik (elemen terakhir muncul di paling kiri).

• Kegunaan: Membalik urutan visual tanpa mengubah struktur HTML.

C. Column

Elemen ditumpuk secara vertikal dari atas ke bawah.

• Main Axis: Vertikal.

• Kegunaan: Menu sidebar, daftar berita di mobile, atau form input.

D. Column-Reverse

Elemen ditumpuk secara vertikal, namun urutannya dibalik dari bawah ke atas.

Tutorial: Responsif dari Baris ke Kolom

Teknik ini sangat sering digunakan dalam pengembangan SatuMedia (riwara.id) agar tampilan yang tadinya berjajar di desktop menjadi bertumpuk di HP.

Struktur HTML

<div class="news-wrapper"> <div class="item">Berita 1</div> <div class="item">Berita 2</div> <div class="item">Berita 3</div>
</div>

Kode CSS

.news-wrapper { display: flex; /* Desktop: Berjajar ke samping */ flex-direction: row; gap: 20px;
} /* Mengubah arah saat layar di bawah 768px (Mobile) */
@media (max-width: 768px) { .news-wrapper { /* Mobile: Bertumpuk ke bawah */ flex-direction: column; }
} .item { background: #3498db; color: white; padding: 20px; flex: 1; /* Agar lebar merata */
}

Tips Pro untuk Developer

1. Hati-hati dengan Perataan: Ingat, jika Anda mengubah flex-direction menjadi column, maka justify-content sekarang mengatur perataan vertikal dan align-items mengatur perataan horizontal. Ini sering membingungkan bagi pemula.

2. Aksesibilitas: Menggunakan row-reverse atau column-reverse hanya mengubah urutan secara visual. Pembaca layar (screen reader) tetap akan membaca urutan sesuai kode HTML asli. Pastikan ini tidak membingungkan pengguna dengan kebutuhan khusus.

3. Kombinasi Gap: Gunakan gap untuk memberi jarak. Saat arah berubah dari row ke column, gap akan otomatis berpindah dari jarak samping menjadi jarak atas-bawa