Dokumentasi CSS interaktif: Flexbox

Q: Apa arti flex: 1?

flex: 1 adalah singkatan dari flex: 1 1 0%: item boleh membesar (flex-grow: 1), boleh menyusut (flex-shrink: 1), dan dimulai dari ukuran nol (flex-basis: 0%). Item yang semuanya punya flex: 1 membagi ruang kosong sama rata, jadi lebarnya akhirnya sama kecuali kontennya tidak muat.

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

justify-content menempatkan item di sepanjang sumbu utama (horizontal pada baris), dan align-items menempatkannya di sepanjang sumbu silang (vertikal pada baris). Dengan flex-direction: column, kedua sumbu bertukar, jadi justify-content menjadi vertikal.

Q: Kenapa item flex saya meluber keluar wadahnya?

Item flex punya min-width: auto secara default, jadi item itu menolak menyusut lebih kecil dari lebar kata terpanjang atau anak terlebarnya. Atur min-width: 0 (atau overflow: hidden) pada item agar bisa menyusut, misalnya supaya text-overflow: ellipsis berfungsi.

Q: Apakah flexbox berfungsi pada elemen inline seperti span?

Ya. Elemen apa pun dengan display: flex adalah flex container, dan anak-anaknya menjadi item flex apa pun nilai display mereka sendiri, jadi anak tidak lagi inline dan menerima width, height, serta margin seperti block.

Fungsi display: flex

Taruh display: flex pada sebuah induk, dan anak langsungnya berjajar dalam satu baris, berdampingan, dan meregang dengan tinggi yang sama. Satu deklarasi itu menggantikan float, inline-block, dan sebagian besar trik pemosisian untuk menata deretan elemen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>display flex</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { background: #e5e7eb; padding: 8px; margin-bottom: 12px; }
    .flex { display: flex; gap: 8px; }
    .item { background: #2563eb; color: white; padding: 10px 14px; }
    .tall { padding-block: 24px; }
  </style>
</head>
<body>
  <p>Without flex (normal block layout):</p>
  <div class="box">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
  <p>With display: flex:</p>
  <div class="box flex">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

Di kotak pertama, setiap div mengambil satu baris penuh. Di kotak kedua, ketiga item berada dalam satu baris, masing-masing hanya selebar kontennya, dan One serta Three meregang setinggi Two. Hanya induknya yang berubah: display: flex ditaruh di container, tidak pernah di item-nya.

Playground flexbox

Pilih nilai-nilainya dan lihat item-nya bergerak. Baris kode di bawah kotak adalah CSS untuk apa yang kamu lihat, dan daftar di bawahnya adalah posisi sebenarnya yang ditempatkan browser untuk setiap item, diukur dengan getBoundingClientRect().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flexbox playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
    #box { display: flex; height: 170px; background: #e5e7eb; border: 2px solid #111827; }
    .item { background: #2563eb; color: white; width: 60px; padding: 8px; box-sizing: border-box; }
    .item:nth-child(2) { background: #16a34a; height: 80px; }
    .item:nth-child(3) { background: #f59e0b; height: 50px; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>flex-direction <select data-p="flex-direction"><option>row</option><option>row-reverse</option><option>column</option><option>column-reverse</option></select></label>
    <label>justify-content <select data-p="justify-content"><option>flex-start</option><option>center</option><option>flex-end</option><option>space-between</option><option>space-around</option><option>space-evenly</option></select></label>
    <label>align-items <select data-p="align-items"><option>stretch</option><option>flex-start</option><option>center</option><option>flex-end</option><option>baseline</option></select></label>
    <label>gap <select data-p="gap"><option>0px</option><option>8px</option><option>24px</option></select></label>
  </div>
  <div id="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <pre id="out"></pre>
  <script>
    const box = document.getElementById('box');
    const selects = document.querySelectorAll('select');
    const update = () => {
      const css = [];
      selects.forEach((s) => { box.style.setProperty(s.dataset.p, s.value); css.push(s.dataset.p + ': ' + s.value + ';'); });
      const b = box.getBoundingClientRect();
      const places = [...box.children].map((el) => {
        const r = el.getBoundingClientRect();
        return el.textContent + ': x ' + Math.round(r.left - b.left - 2) + ', y ' + Math.round(r.top - b.top - 2) + ', ' + Math.round(r.width) + ' x ' + Math.round(r.height);
      });
      document.getElementById('out').textContent = '.box { display: flex; ' + css.join(' ') + ' }\n' + places.join('\n');
    };
    selects.forEach((s) => s.addEventListener('change', update));
    update();
  </script>
</body>
</html>

Hal-hal yang bisa dicoba:

justify-content: space-between: item 1 berada di x 0 dan item 3 menyentuh tepi yang jauh.
align-items: center: ketiga item mempertahankan tingginya sendiri dan titik tengahnya sejajar. Dengan stretch default, item 1 tidak punya tinggi sendiri dan mengisi seluruh 170px tinggi container.
flex-direction: column: sekarang justify-content menggerakkan item secara vertikal dan align-items secara horizontal. Kedua properti itu mengikuti sumbu, bukan layar.

Sumbu utama dan sumbu silang

Setiap flex container punya dua sumbu. Sumbu utama adalah arah aliran item, yang diatur oleh flex-direction. Sumbu silang melintang terhadapnya.

`flex-direction`	Sumbu utama	Sumbu silang	`justify-content` menggerakkan item	`align-items` menggerakkan item
`row` (default)	horizontal, sesuai urutan baca	vertikal	secara horizontal	secara vertikal
`row-reverse`	horizontal, terbalik	vertikal	secara horizontal	secara vertikal
`column`	vertikal, dari atas ke bawah	horizontal	secara vertikal	secara horizontal
`column-reverse`	vertikal, dari bawah ke atas	horizontal	secara vertikal	secara horizontal

Di halaman yang ditulis dari kanan ke kiri (dir="rtl"), row dimulai dari tepi kanan, karena sumbu utama mengikuti arah tulisan.

Properti container

Properti-properti ini ditaruh di elemen yang punya display: flex:

Properti	Fungsinya	Default
`flex-direction`	Baris atau kolom, dan ke arah mana	`row`
`flex-wrap`	Apakah item pindah ke baris baru saat kehabisan ruang	`nowrap`
`flex-flow`	Shorthand untuk `flex-direction` dan `flex-wrap`	`row nowrap`
`justify-content`	Penempatan dan jarak di sepanjang sumbu utama	`normal` (berperilaku seperti `flex-start`)
`align-items`	Penempatan item di sepanjang sumbu silang	`normal` (berperilaku seperti `stretch`)
`align-content`	Jarak antarbaris saat item wrap	`normal`
`gap`	Jarak antar-item (`row-gap`, `column-gap`)	`0`

justify-content dan align-items masing-masing punya halaman sendiri berisi setiap nilainya: justify-content dan align-items. Wrap dan arah ada di halaman flex-wrap.

Properti item: flex-grow, flex-shrink, flex-basis

Properti-properti ini ditaruh di anak-anaknya dan menentukan cara mereka berbagi lebar container:

flex-basis: ukuran awal item sebelum ruang kosong dibagikan (auto berarti "pakai width atau kontenku").
flex-grow: berapa bagian dari ruang sisa yang diambil item. 0 berarti item tidak pernah membesar.
flex-shrink: seberapa banyak item mengalah saat ruangnya tidak cukup. 0 berarti item tidak pernah menyusut.

Shorthand flex mengatur ketiganya:

Kamu menulis	Artinya	Perilaku
`flex: initial` (default)	`0 1 auto`	Ukuran konten, boleh menyusut, tidak pernah membesar
`flex: 1`	`1 1 0%`	Dimulai dari nol dan mengambil bagian ruang yang sama rata
`flex: auto`	`1 1 auto`	Ukuran konten ditambah bagian dari ruang sisa
`flex: none`	`0 0 auto`	Persis seukuran konten atau width-nya, tidak pernah membesar atau menyusut
`flex: 2`	`2 1 0%`	Dua kali bagian item dengan `flex: 1`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex grow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; width: 480px; background: #e5e7eb; padding: 8px; margin-bottom: 8px; }
    .row div { background: #2563eb; color: white; padding: 8px 0; text-align: center; }
    .one { flex: 1; }
    .row .two { flex: 2; background: #16a34a; }
    .row .none { flex: none; width: 100px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row"><div class="one">flex: 1</div><div class="one">flex: 1</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="one">flex: 1</div><div class="two">flex: 2</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="none">flex: none</div><div class="one">flex: 1</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.row')].map((row) =>
      [...row.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(' + ')
    ).join(' | ');
  </script>
</body>
</html>

Setiap baris selebar 480px di dalam padding-nya, dan dua gap 8px menyisakan 464px untuk item-item. Lebar yang dicetak menunjukkan cara pembagiannya: masing-masing sekitar 155px di baris pertama, 116 + 232 + 116 di baris kedua (item flex: 2 mendapat dua kali bagian setiap tetangganya), dan 100 + 372 di baris ketiga, tempat item flex: none mempertahankan lebarnya dan item lain mengambil semua sisanya.

Tata letak sungguhan dengan flexbox

Header dengan logo di awal dan link di akhir adalah tata letak flex yang paling umum. margin-inline-start: auto pada satu item menghabiskan semua ruang kosong sebelumnya dan mendorong item itu beserta semua yang setelahnya ke akhir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nav bar</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    nav { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #111827; }
    nav a { color: white; text-decoration: none; }
    .logo { font-weight: 700; font-size: 20px; }
    .push { margin-inline-start: auto; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <nav>
    <a class="logo" href="#">Logo</a>
    <a class="push" href="#">Docs</a>
    <a href="#">Pricing</a>
    <a class="cta" href="#">Sign up</a>
  </nav>
</body>
</html>

align-items: center menyejajarkan teks logo yang lebih besar dengan link-link, dan gap memberi jarak antar-link tanpa perlu margin yang harus dibatalkan di link terakhir.

Pola sehari-hari kedua adalah baris media: ikon berukuran tetap dan teks yang mengambil sisa ruang serta wrap di kolomnya sendiri.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media object</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .media { display: flex; align-items: flex-start; gap: 12px; max-width: 420px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; }
    .avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #16a34a; }
    .text { flex: 1; min-width: 0; margin: 0; }
  </style>
</head>
<body>
  <div class="media">
    <div class="avatar"></div>
    <p class="text">This text wraps next to the circle. However long it gets, the circle keeps its 48px size because it has flex: none.</p>
  </div>
</body>
</html>

flex: none adalah jaminannya. Item flex menyusut secara default, jadi jika kamu menghapusnya dari lingkaran dan juga menghapus flex: 1 dari teks, paragrafnya memampatkan lingkaran itu menjadi sekitar 23px: sebuah oval. Untuk menengahkan satu hal di dalam kotak, flexbox cukup dua baris (justify-content: center; align-items: center); halaman membuat div di tengah membandingkannya dengan cara-cara lain.

order dan aksesibilitas

Properti order dan arah -reverse mengubah tempat item tampil, bukan posisinya di HTML. Pembaca layar dan tombol Tab tetap mengikuti urutan HTML, jadi pengguna keyboard bisa melompat dari link pertama di layar ke link terakhir. Pakai keduanya hanya untuk dekorasi; jika urutannya punya makna, ubah HTML-nya.

Flexbox atau grid

Flexbox bekerja dalam satu arah dalam satu waktu: item dalam satu baris menentukan ukurannya dari konten, dan baris kedua (dengan wrap) tidak sejajar dengan baris pertama. Grid bekerja dalam dua arah: kamu menentukan kolom dan baris, lalu item menempati posisinya. Nav bar, toolbar, atau baris form adalah flexbox; galeri atau halaman dengan sidebar adalah grid.

Kesalahan umum

display: flex di item, bukan di induknya. Container yang diberi display: flex; anak-anaknya adalah item.
Berharap align-items menggerakkan item secara vertikal tanpa tinggi. Jika container hanya setinggi item tertingginya, tidak ada ruang untuk bergerak. Beri container sebuah tinggi; atau sebenarnya properti itu sudah bekerja, hanya saja tidak ada yang perlu dilakukan.
Teks yang meluber alih-alih menyusut. Item flex punya min-width: auto. Tambahkan min-width: 0 pada item yang seharusnya menyusut.
Memakai flex: 1 lalu heran kenapa lebarnya berbeda. Item dengan flex: 1 berbagi ruang sama rata, tetapi item yang kontennya tidak muat (URL panjang, gambar) tidak akan menyusut lebih kecil dari kontennya. min-width: 0 juga memperbaikinya.
Margin di antara item. Pakai gap pada container; gap hanya ada di antara item.
Membuat flex bersarang tanpa perlu. Hanya anak langsung yang menjadi item flex. Cucu mengikuti tata letak normal kecuali induknya sendiri juga display: flex.

Pertanyaan yang sering diajukan

Apa fungsi display: flex?

Nilai ini mengubah elemen menjadi flex container. Anak langsungnya menjadi item flex dan secara default ditaruh dalam satu baris, berdampingan, meregang dengan tinggi yang sama, dengan properti seperti justify-content, align-items, dan gap yang mengatur cara item berbagi ruang.

Apa arti flex: 1?

flex: 1 adalah singkatan dari flex: 1 1 0%: item boleh membesar (flex-grow: 1), boleh menyusut (flex-shrink: 1), dan dimulai dari ukuran nol (flex-basis: 0%). Item yang semuanya punya flex: 1 membagi ruang kosong sama rata, jadi lebarnya akhirnya sama kecuali kontennya tidak muat.

Apa perbedaan justify-content dan align-items?

justify-content menempatkan item di sepanjang sumbu utama (horizontal pada baris), dan align-items menempatkannya di sepanjang sumbu silang (vertikal pada baris). Dengan flex-direction: column, kedua sumbu bertukar, jadi justify-content menjadi vertikal.

Sebaiknya pakai flexbox atau grid?

Pakai flexbox untuk satu baris atau kolom yang item-nya menentukan ukuran dari kontennya: nav bar, kelompok tombol, label di samping input. Pakai grid saat kamu ingin baris dan kolom yang sejajar satu sama lain, seperti grid kartu atau tata letak halaman.

Kenapa item flex saya meluber keluar wadahnya?

Item flex punya min-width: auto secara default, jadi item itu menolak menyusut lebih kecil dari lebar kata terpanjang atau anak terlebarnya. Atur min-width: 0 (atau overflow: hidden) pada item agar bisa menyusut, misalnya supaya text-overflow: ellipsis berfungsi.

Apakah flexbox berfungsi pada elemen inline seperti span?

Ya. Elemen apa pun dengan display: flex adalah flex container, dan anak-anaknya menjadi item flex apa pun nilai display mereka sendiri, jadi anak <span> tidak lagi inline dan menerima width, height, serta margin seperti block.

Konsep terkait

Flexbox CSS: display flex, Sumbu, Perataan, dan flex