CSS Academy · Pelajaran

Display Flex dan Arah Flex

Aktifkan flexbox pada kontainer dan kontrol arah sumbu utama dengan flex-direction.

Display Flex dan Arah Flex adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Mengaktifkan Tata Letak Fleksibel

Tata letak fleksibel diaktifkan dengan menetapkan display: flex pada elemen wadah (wadah fleksibel). Anak-anak langsungnya otomatis menjadi elemen fleksibel.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

Tata Letak Fleksibel Sebaris

display: inline-flex membuat wadah fleksibel yang mengalir secara sebaris (seperti inline-block), bukan sebagai blok. Perilaku tata letak fleksibel di dalamnya sama persis.

<p>Status: <span class="badge">🔥 Trending</span></p>

Sumbu Utama dan Sumbu Silang

Tata letak fleksibel memiliki dua sumbu:

Sumbu utama: arah utama penataan elemen
Sumbu silang: tegak lurus terhadap sumbu utama

Semua properti fleksibel mengacu pada sumbu-sumbu ini, bukan pada arah tetap.

flex-direction: row (Bawaan)

Arah bawaannya adalah row: elemen ditempatkan dari kiri ke kanan sepanjang sumbu utama horizontal.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column

flex-direction: column menumpuk elemen secara vertikal. Sumbu utama menjadi vertikal dan sumbu silang menjadi horizontal.

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

row-reverse membalik arah horizontal: elemen ditempatkan dari kanan ke kiri. Awal sumbu utama berada di sebelah kanan.

<nav class="rtl-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column-reverse

column-reverse menumpuk elemen dari bawah ke atas. Elemen terakhir muncul di bagian atas.

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

flex-direction Memengaruhi Semua Properti Fleksibel

Saat Anda mengubah flex-direction, justify-content juga mengubah arah. Jika arahnya adalah column, justify-content melakukan perataan sepanjang sumbu vertikal, bukan horizontal.

Tata Letak Horizontal Sederhana

Kasus penggunaan tata letak fleksibel yang paling sederhana—memusatkan elemen dalam navigasi:

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

Tata Letak Vertikal Sederhana

Memusatkan konten kartu secara vertikal dan horizontal:

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

Singkatan flex-flow

flex-flow adalah singkatan untuk flex-direction dan flex-wrap:

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Pemeriksaan Singkat

Saat flex-direction: column ditetapkan, sumbu mana yang dikendalikan oleh justify-content?

Ringkasan

Tetapkan display: flex pada wadah untuk membuat konteks fleksibel bagi anak-anaknya. flex-direction menetapkan arah sumbu utama: row (horizontal) atau column (vertikal). Semua properti perataan fleksibel relatif terhadap sumbu-sumbu ini, bukan terhadap arah tetap kiri/kanan/atas/bawah.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Display Flex dan Arah Flex” gratis?

Ya — teks lengkap “Display Flex dan Arah Flex” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Display Flex dan Arah Flex”?

Aktifkan flexbox pada kontainer dan kontrol arah sumbu utama dengan flex-direction. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Display Flex dan Arah Flex” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy