Rows with Flexbox · Baris dengan Flexbox
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Halaman ini memerlukan browser terbaru (dengan dukungan SharedArrayBuffer). Silakan perbarui Chrome, Edge, Firefox, atau Safari ke versi terbaru.
English
Putting boxes in a row
- By default, boxes stack downward. Often you want them side by side.
- Flexbox is the easy way to do that.
- Put
display: flex;on the container — the box that holds the others — and its children line up in a row.
Bahasa Indonesia
Menempatkan kotak dalam baris
- Secara default, kotak menumpuk ke bawah. Seringkali Anda ingin mereka berdampingan.
- Flexbox adalah cara mudah untuk melakukan itu.
- Terapkan
display: flex;pada wadah — kotak yang menampung yang lain — dan anak-anaknya akan berbaris dalam satu baris.
English
Spacing them out
- Once a box is
display: flex;, you control how its children spread. justify-content: space-between;pushes them apart, with gaps between.gap: 12px;adds an even space between every child.
Bahasa Indonesia
Memberi jarak antar mereka
- Setelah sebuah kotak diatur menjadi
display: flex;, Anda mengontrol bagaimana anak-anaknya menyebar. justify-content: space-between;mendorong mereka menjauh, dengan celah di antaranya.gap: 12px;menambahkan jarak merata di antara setiap anak.
<style>
.bar { display: flex; justify-content: space-between; }
.btn { background-color: #6c5; padding: 10px 16px; }
</style>
<div class="bar">
<span class="btn">Home</span>
<span class="btn">About</span>
<span class="btn">Contact</span>
</div>
English
Common mistakes
display: flexgoes on the container, not on the items.justify-contentspaces items along the row.
Bahasa Indonesia
Kesalahan umum
display: flexditerapkan pada wadah, bukan pada item.justify-contentmemberi jarak item sepanjang baris.
English
Now you try
display: flexgoes on the container, not the items.- Turn a box into a row, then spread its children out.
Bahasa Indonesia
Sekarang Anda coba
display: flexditerapkan pada wadah, bukan item.- Ubah kotak menjadi baris, lalu sebar anak-anaknya.
Explore · Jelajahi
Flexbox lays out a row · Flexbox menyusun baris
justify-content spaces items along the row; align-items across it. · justify-content mengatur jarak item sepanjang baris; align-items melintanginya.
Put the three boxes side by side. Add display: flex; to the .row rule. · Susun ketiga kotak berdampingan. Tambahkan display: flex; ke aturan .row.
Spread the boxes evenly across the row. Add justify-content: space-between; to the .row rule. · Sebar kotak-kotak secara merata di sepanjang baris. Tambahkan justify-content: space-between; ke aturan .row.