CSS Academy · Pelajaran

Flex Wrap dan Align-Content

Izinkan item flex berpindah ke beberapa baris dan ratakan baris yang terbungkus dengan align-content.

Flex Wrap dan Align-Content adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

flex-wrap: nowrap (Bawaan)

Secara bawaan, elemen fleksibel tidak membungkus. Jika elemen melebihi lebar wadah, elemen akan menyusut atau meluap, bukan membungkus ke baris baru.

flex-wrap: wrap

Dengan flex-wrap: wrap, elemen yang meluap dari sumbu utama akan membungkus ke baris baru (atau kolom baru, dalam arah kolom). Setiap baris hasil pembungkusan bertindak seperti wadah fleksibel mini yang terpisah.

<div class="card-grid">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
    <div>Card 5</div>
  </div>

flex-wrap: wrap-reverse

wrap-reverse membungkus elemen ke arah sumbu silang yang berlawanan: baris baru muncul di atas (dalam arah baris), bukan di bawah.

Pola Kartu yang Membungkus

Tata letak kartu responsif klasik, yang membuat kartu membungkus ke baris berikutnya saat area tampilan menyusut:

<div class="cards">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>

align-content untuk Banyak Baris

align-content mengendalikan spasi di antara baris yang membungkus pada sumbu silang. Properti ini tidak berpengaruh jika hanya ada satu baris. Nilainya sama seperti justify-content.

Nilai align-content

Nilai yang tersedia:

flex-start — merapatkan baris ke arah awal sumbu silang
flex-end — merapatkan baris ke arah akhir sumbu silang
center — memusatkan baris
space-between — memberi ruang yang sama di antara baris
space-around — memberi ruang yang sama di sekeliling baris
stretch — merentangkan baris hingga memenuhi wadah (bawaan)

<div class="gallery">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

align-items dan align-content

Perbedaannya:

align-items — meratakan elemen di dalam setiap baris fleksibel
align-content — meratakan baris fleksibel itu sendiri di dalam wadah

Celah dalam Tata Letak Fleksibel

Properti gap (sebelumnya grid-gap) menambahkan ruang yang konsisten di antara elemen fleksibel tanpa menggunakan margin. Properti ini berfungsi untuk celah baris maupun celah kolom.

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

Pembungkusan Responsif tanpa Kueri Media

Bungkus elemen secara otomatis menjadi sebanyak mungkin kolom yang muat dengan menggunakan ukuran ideal tetap. Kueri media tidak diperlukan:

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

Singkatan flex-flow

flex-flow menggabungkan flex-direction dan flex-wrap dalam satu deklarasi:

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

Pembungkusan dibandingkan Kisi

Untuk tata letak dua dimensi yang kompleks dengan baris dan kolom yang ditentukan, Kisi CSS lebih sesuai. Pembungkusan tata letak fleksibel paling cocok untuk konten satu dimensi yang kebetulan mengalir menjadi beberapa baris.

Pemeriksaan Singkat

Properti mana yang meratakan baris pembungkus itu sendiri saat wadah fleksibel memiliki beberapa baris?

Ringkasan

flex-wrap: wrap memungkinkan elemen mengalir ke baris baru. align-content mengendalikan spasi di antara baris-baris ini dalam wadah multibaris. Gunakan gap untuk spasi yang konsisten. Gabungkan flex: 1 1 250px dengan flex-wrap untuk membuat kisi kartu responsif tanpa kueri media.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Flex Wrap dan Align-Content” gratis?

Ya — teks lengkap “Flex Wrap dan Align-Content” 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 “Flex Wrap dan Align-Content”?

Izinkan item flex berpindah ke beberapa baris dan ratakan baris yang terbungkus dengan align-content. 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 3 dari 4.

Berapa lama pelajaran “Flex Wrap dan Align-Content” 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