Dokumentasi CSS interaktif: Flex Wrap

Q: Apa perbedaan flex-direction row dan column?

row (default) menaruh item berdampingan sesuai arah tulisan, dan column menumpuknya dari atas ke bawah. Sumbu utama ikut berputar, jadi di dalam kolom justify-content bekerja secara vertikal dan align-items secara horizontal.

Q: Apa itu flex-flow?

Shorthand untuk flex-direction dan flex-wrap dalam satu deklarasi: flex-flow: row wrap; sama dengan flex-direction: row; flex-wrap: wrap;.

Q: Apa perbedaan align-items dan align-content?

align-items menempatkan item di dalam barisnya. align-content menempatkan baris-baris itu sendiri di dalam wadah, jadi hanya berpengaruh jika wadahnya memakai flex-wrap: wrap dan lebih tinggi dari baris-barisnya.

flex-wrap: satu baris, atau sebanyak yang dibutuhkan

Secara default, flex container menaruh semua item-nya dalam satu baris (flex-wrap: nowrap) dan menyusutkannya agar muat. flex-wrap: wrap membiarkan item tetap berukuran sama dan pindah ke baris berikutnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-wrap</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; gap: 8px; width: 340px; padding: 8px; background: #e5e7eb; margin-bottom: 12px; }
    .item { width: 100px; height: 36px; background: #2563eb; color: white; }
    .wrap { flex-wrap: wrap; }
  </style>
</head>
<body>
  <code>flex-wrap: nowrap (default)</code>
  <div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <code>flex-wrap: wrap</code>
  <div class="box wrap"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <script>
    document.querySelectorAll('.box').forEach((box) => {
      box.children[0].textContent = Math.round(box.children[0].getBoundingClientRect().width) + 'px wide';
    });
  </script>
</body>
</html>

Setiap item meminta 100px, ada lima di dalam kotak 340px. Lima item dan empat gap 8px butuh 532px, jadi tanpa wrap setiap item dimampatkan menjadi sekitar 62px, karena item flex menyusut secara default. Dengan wrap, item tetap 100px: tiga muat di baris pertama dan dua sisanya pindah ke baris kedua.

Nilai flex-wrap

Nilai	Yang terjadi
`nowrap` (default)	Satu baris. Item menyusut, dan meluber keluar wadah begitu tidak bisa menyusut lagi
`wrap`	Item yang tidak muat memulai baris baru di bawahnya
`wrap-reverse`	Sama, tetapi baris baru bertumpuk ke atas: baris pertama ada di bawah

Lihat item yang wrap

Geser slider untuk mengubah lebar wadah. Teks di bawahnya menghitung jumlah baris dan berapa item di setiap baris:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrap slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    #box { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: #e5e7eb; margin: 10px 0; }
    .item { width: 90px; height: 40px; background: #16a34a; color: white; display: flex; align-items: center; justify-content: center; }
  </style>
</head>
<body>
  <label>container width <input id="w" type="range" min="120" max="620" value="400"> <span id="wv"></span></label>
  <div id="box"></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    for (let i = 1; i <= 6; i++) box.insertAdjacentHTML('beforeend', '<div class="item">' + i + '</div>');
    const update = () => {
      const w = document.getElementById('w').value;
      box.style.width = w + 'px';
      document.getElementById('wv').textContent = w + 'px';
      const lines = {};
      [...box.children].forEach((c) => { const top = Math.round(c.getBoundingClientRect().top); lines[top] = (lines[top] || 0) + 1; });
      const counts = Object.values(lines);
      document.getElementById('out').textContent = counts.length + ' line(s): ' + counts.join(' + ') + ' items';
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

Di lebar 400px, empat item 90px dan tiga gap 8px (384px) muat dalam satu baris, jadi hasilnya 4 + 2. Geser ke arah 620px dan keenamnya muat di satu baris; geser ke arah 120px dan setiap item mendapat barisnya sendiri.

flex-direction: baris atau kolom

flex-direction mengatur arah aliran item, yaitu sumbu utama:

Nilai	Item berjalan	Item pertama
`row` (default)	berdampingan, sesuai arah tulisan	di awal baris
`row-reverse`	berdampingan, terbalik	di akhir baris
`column`	bertumpuk, dari atas ke bawah	di atas
`column-reverse`	bertumpuk, dari bawah ke atas	di bawah

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-direction</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .box { display: flex; gap: 4px; padding: 6px; background: #e5e7eb; width: 160px; height: 110px; margin-top: 4px; }
    .box div { background: #2563eb; color: white; padding: 4px 10px; }
  </style>
</head>
<body>
  <div class="grid">
    <div><code>row</code><div class="box" style="flex-direction: row"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>row-reverse</code><div class="box" style="flex-direction: row-reverse"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column</code><div class="box" style="flex-direction: column"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column-reverse</code><div class="box" style="flex-direction: column-reverse"><div>1</div><div>2</div><div>3</div></div></div>
  </div>
</body>
</html>

Di dua kotak row, item meregang setinggi kotak, karena align-items: stretch bekerja melintasi baris. Di kotak column, item justru meregang selebar penuh lebar kotak, dengan alasan yang sama. Sumbunya berputar, dan setiap properti perataan ikut berputar (halaman justify-content menunjukkannya secara rinci).

flex-flow: keduanya dalam satu baris

flex-flow adalah shorthand untuk flex-direction lalu flex-wrap:

.cards { flex-flow: row wrap; }      /* flex-direction: row; flex-wrap: wrap; */
.stack { flex-flow: column nowrap; } /* flex-direction: column; flex-wrap: nowrap; */

Kartu responsif dengan wrap tanpa media query

Beri setiap item ukuran awal dengan flex: 1 1 180px dan biarkan barisnya wrap. Setiap item membesar untuk mengisi barisnya, dan saat sebuah baris tidak muat lagi untuk item 180px berikutnya, item itu pindah ke baris baru:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrapping cards</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .cards { display: flex; flex-wrap: wrap; gap: 12px; }
    .card {
      flex: 1 1 180px; /* grow, shrink, start at 180px */
      padding: 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #f9fafb;
    }
  </style>
</head>
<body>
  <div class="cards">
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
    <div class="card">Four</div>
    <div class="card">Five</div>
  </div>
</body>
</html>

Di pratinjau selebar sekitar 800px, tiga kartu muat di baris pertama (masing-masing sekitar 253px) dan dua kartu terakhir berbagi baris kedua, tempat masing-masing membesar menjadi sekitar 386px. Begitulah cara kerja flexbox: setiap baris membagi ruangnya sendiri, jadi kartu di baris terakhir yang pendek jadi lebih lebar dari kartu di atasnya. Jika kamu ingin kartu terakhir tetap selebar kartu lainnya, pakai grid dengan repeat(auto-fill, minmax(180px, 1fr)) (lihat halaman grid).

align-content: mengatur jarak antarbaris

Saat sebuah wadah wrap dan lebih tinggi dari baris-barisnya, align-content menentukan letak baris-baris itu. Nilainya sama dengan justify-content, ditambah stretch:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-content</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; flex-wrap: wrap; gap: 6px; width: 200px; height: 160px; background: #e5e7eb; }
    .box div { width: 60px; height: 30px; background: #f59e0b; }
    .row { display: flex; gap: 16px; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>align-content: flex-start</code><div class="box" style="align-content: flex-start"><div></div><div></div><div></div><div></div><div></div></div></div>
    <div><code>align-content: space-between</code><div class="box" style="align-content: space-between"><div></div><div></div><div></div><div></div><div></div></div></div>
  </div>
</body>
</html>

Di kotak pertama, kedua baris berada di atas. Di kotak kedua, baris pertama berada di atas dan baris kedua di bawah, dengan semua sisa tinggi di antaranya.

Urutan terbalik dan aksesibilitas

row-reverse, column-reverse, dan wrap-reverse hanya mengubah tempat item digambar. Pembaca layar dan tombol Tab tetap mengikuti urutan HTML, jadi pengguna keyboard berpindah antar-item dengan arah yang berlawanan dari yang mereka lihat. Balik urutan hanya untuk efek visual; jika urutannya punya makna, ubah di HTML.

Kesalahan umum

Item yang menyusut alih-alih wrap. Item dengan flex: 1 dimulai dari flex-basis 0 dan berdesakan di satu baris. Beri basis yang nyata, seperti flex: 1 1 200px.
Menaruh flex-wrap di item. Properti ini milik flex container.
Memakai align-items untuk mengatur jarak baris yang wrap. Itu meratakan item di dalam setiap baris; baris-barisnya sendiri dipindahkan dengan align-content.
Item terakhir yang sendirian meregang selebar seluruh baris. Itulah flex-grow pada baris yang hanya punya satu item. Pakai grid jika setiap kartu harus sama lebarnya.
Berharap flex-direction: column mengisi sebuah tinggi. Kolom container hanya setinggi isinya kecuali kamu memberinya height, jadi justify-content tidak punya ruang untuk bekerja.

Pertanyaan yang sering diajukan

Apa fungsi flex-wrap: wrap?

Nilai ini membuat item flex pindah ke baris baru saat tidak muat dalam satu baris. Dengan nowrap default, item tetap di satu baris dan menyusut, atau meluber keluar wadah jika tidak bisa menyusut lagi.

Kenapa flex-wrap tidak berfungsi?

Wrap hanya terjadi jika ukuran awal item-item dijumlahkan lebih besar dari wadahnya. Item dengan flex: 1 dimulai dari flex-basis 0, jadi tidak pernah wrap; beri ukuran awal yang nyata (flex: 1 1 200px atau width: 200px). Periksa juga bahwa flex-wrap ditaruh di flex container, bukan di item-nya.

Apa perbedaan flex-direction row dan column?

row (default) menaruh item berdampingan sesuai arah tulisan, dan column menumpuknya dari atas ke bawah. Sumbu utama ikut berputar, jadi di dalam kolom justify-content bekerja secara vertikal dan align-items secara horizontal.

Apa itu flex-flow?

Shorthand untuk flex-direction dan flex-wrap dalam satu deklarasi: flex-flow: row wrap; sama dengan flex-direction: row; flex-wrap: wrap;.

Apa perbedaan align-items dan align-content?

align-items menempatkan item di dalam barisnya. align-content menempatkan baris-baris itu sendiri di dalam wadah, jadi hanya berpengaruh jika wadahnya memakai flex-wrap: wrap dan lebih tinggi dari baris-barisnya.

Konsep terkait

flex-wrap dan flex-direction CSS: Baris, Kolom, Wrap