Tutorial CSS / Penyelarasan Flexbox: wrap, gap, grow, dan shrink
Flexbox menggabungkan penyusunan, pembungkusan, dan ukuran fleksibel untuk menyesuaikan item ke dalam ruang yang tersedia. justify-content bekerja sepanjang sumbu utama, align-items bekerja melintasinya, dan align-content mendistribusikan beberapa baris ketika ada ruang lintas-sumbu untuk didistribusikan.
Cocokkan properti penyusunan dengan sumbunya
| Properti | Berlaku untuk | Kondisi yang perlu diperiksa |
|---|---|---|
| justify-content | Distribusi item sepanjang sumbu utama kontainer | Sisa ruang setelah menentukan ukuran item |
| align-items | Penjajaran silang sumbu dari masing-masing item | Ukuran silang sumbu item dan tinggi baris |
| align-self | Penjajaran silang sumbu dari item tertentu | Mengubah penjajaran default kontainer secara individu |
| align-content | Penjajaran dari kumpulan baris | Kontainer yang dapat membungkus dan sisa ruang pada sumbu silang |
| gap | Jarak antara item/baris yang berdekatan | Ruang dan pembagian yang ditambahkan oleh perataan |
Dalam mode tulis horizontal-tb dengan direction: ltr dan flex-direction: row, justify-content terutama mengatur horizontal, dan align-items terutama mengatur vertikal. Jika Anda mengubahnya menjadi kolom, sumbu utama menjadi vertikal dan arah fisik kedua properti juga berubah. Secara khusus, harus ada ruang yang tersisa di tinggi kontainer untuk membandingkan justify-content dari kolom. Jika tinggi cocok dengan kontennya secara sempurna, hampir tidak ada ruang untuk bergerak meskipun Anda mengubahnya menjadi center atau space-between. Arah sumbu dan pengaturan awal dari kontainer Flex dapat diperiksa di Dasar Flexbox: Kontainer, Item, dan Sumbu.
justify-content: center menempatkan sekelompok item di tengah, dan space-between menempatkan item pertama dan terakhir di kedua ujung dan membagi ruang di antara mereka. gap adalah jarak yang ditentukan, dan space-between mendistribusikan sisa ruang. Ketika digunakan bersama, jarak sebenarnya mungkin lebih besar dari gap. Jika flex-grow suatu item menggunakan seluruh sisa ruang atau margin otomatis di arah sumbu utama mengambil ruang, perubahan pada justify-content mungkin tidak terlihat.
align-items: center menyelaraskan item dengan tinggi berbeda ke tengah dalam satu baris. align-content: center menempatkan semua baris di tengah pada sumbu silang. Anda tidak boleh menganggap keduanya memiliki fungsi yang sama. align-content tidak berpengaruh pada kontainer satu baris yang nowrap, dan bahkan pada kontainer wrap, jika ukuran yang ditempati oleh baris dan tinggi kontainer sama, tidak ada ruang untuk perbandingan. Anda dapat memeriksa kondisi penerapan pada panduan penyelarasan Flexbox MDN.
Bandingkan penyelarasan item dan penyelarasan baris
Simpan kode di bawah ini sebagai flex-align.html dan buka. Bagian pertama adalah tiga item dengan tinggi berbeda, bagian kedua berisi empat item yang membentuk dua baris jika lebar kontainer cukup. Pada kontainer yang lebih sempit, jumlah baris dapat bertambah. Di bagian kedua, saya mengatur tinggi menjadi 280px untuk memberi ruang bagi pergerakan bundel.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flex-align.html</title>
<style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.toolbar { display: flex; gap: 12px; justify-content: space-between; align-items: center;
width: 100%; max-width: 640px; min-height: 120px; border: 2px solid #789; padding: 12px; }
.toolbar > div { padding: 8px; background: #dceefa; }
.lines { display: flex; flex-wrap: wrap; gap: 12px; width: min(100%, 360px); height: 280px;
align-items: center; align-content: flex-start; border: 2px solid #789; padding: 12px; }
.lines > div { flex: 0 0 140px; padding: 8px; background: #e8f5de; }
.tall { min-height: 60px; }
</style>
</head>
<body>
<h1>Alignment on one line and multiple lines</h1>
<h2>Toolbar</h2><div class="toolbar"><div>Short item</div><div>Two-line item<br>Second line</div><div>Button position</div></div>
<h2>Line group</h2><div class="lines"><div>1</div><div class="tall">2<br>Second line</div><div>3</div><div class="tall">4<br>Second line</div></div>
</body>
</html>- Ubah justify-content di .toolbar menjadi center untuk melihat apakah tiga item berkumpul di tengah. Kita juga membandingkan dengan flex-start dan mengembalikannya ke space-between. Biarkan ukuran item dan jarak tetap seperti semula.
- Ubah align-items di .toolbar menjadi flex-start untuk memastikan sejajar di atas. Jika Anda mengubahnya menjadi stretch, item dengan ukuran sumbu silang otomatis akan bertambah. Setelah perbandingan, dikembalikan ke center.
- Ubah hanya align-content dari .lines menjadi center. Kumpulan baris bergeser ke tengah pada sumbu silang sambil mempertahankan hubungan item dari masing-masing baris. Jika Anda kembali ke flex-start dan hanya mengubah align-items menjadi flex-start, posisi item pendek di setiap baris akan berubah.
- Jika Anda hanya mengubah flex-wrap di .lines menjadi nowrap, semuanya akan mencoba tetap di satu baris, dan contoh ini memakai flex-shrink: 0 pada item, menyebabkan ini meluap secara horizontal. Dalam keadaan ini, Anda tidak dapat menyelaraskan beberapa baris dengan align-content. Setelah konfirmasi, kembalikan ke wrap.
Pahami grow, shrink, dan basis
flex: 1 1 192px adalah grow, shrink, dan basis dalam urutan tersebut. Basis adalah ukuran standar dari mana distribusi spasial sumbu utama dimulai dan bukan nilai yang menjamin lebar akhir. Grow adalah rasio pembesaran untuk sisa ruang, dan shrink adalah rasio pengecilan ketika ruang tidak cukup. Karena ada aturan nilai yang dihilangkan untuk angka tunggal atau auto dalam shorthand, tiga nilai ditentukan dan dibandingkan dalam contoh pembelajaran.
| deklarasi | Ketika ada sisa ruang | Ketika ruang habis |
|---|---|---|
| flex: 0 1 192px | Mempertahankan ukuran standar | Berpartisipasi dalam pengecilan |
| flex: 1 1 192px | Sisa ruang didistribusikan | Berpartisipasi dalam pengecilan |
| flex: 0 0 192px | Mempertahankan ukuran standar | Tidak ada pengurangan. Jika tidak dibungkus, bisa meluap. |
Sebagai contoh, jika sebuah elemen induk dengan lebar konten 640px berisi tiga item dengan ukuran dasar 100px dan dua celah (masing-masing 20px), sisa ruang adalah 640 − 300 − 40 = 300px. Jika rasio pertumbuhan adalah 1:2:1, ruang tambahan akan menjadi 75px, 150px, dan 75px, dan lebar akhirnya akan menjadi 175px, 250px, dan 175px. Ini adalah perhitungan kondisi yang tidak melibatkan ukuran minimum konten atau batas min/maks.
Jumlah penyusutan tidak terdistribusi merata hanya berdasarkan angka penyusutan saja. Pertimbangkan baik rasio pengurangan maupun ukuran referensi. Jika kita perlu mengurangi 60px dari dua item dengan ukuran standar 200px dan 100px dan keduanya memiliki penyusutan 1, maka dalam kondisi sederhana tanpa batasan, kita akan mengurangi 40px dan 20px. Hasilnya bisa berbeda jika ada padding, border, ukuran konten minimum, dll., jadi Anda sebaiknya benar-benar memeriksa nilai yang diterapkan. penjelasan flex di MDN menjelaskan shorthand dan kondisi ukuran.
Sebarkan ruang dan bungkus kartu
Simpan kode berikut sebagai flex-size.html. Area perhitungan sesuai dengan perhitungan di atas dengan membuat lebar maksimum 640px tanpa tambahan padding atau border. Daftar kartu menggunakan lebar 192px sebagai standar untuk pemisah baris, tetapi mengisi ruang yang tersisa. Jika daftar dengan list-style: none berada di luar nav, daftar tersebut mungkin tidak dikenali sebagai daftar di pohon aksesibilitas Safari. Dalam contoh, ul menentukan role="list" untuk menentukan peran daftar. Kondisi aksesibilitas saat menghapus bullet dan spasi juga dijelaskan di Mengatur Paragraf dan Daftar dengan CSS.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flex-size.html</title>
<style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.calc { display: flex; gap: 20px; width: min(100%, 640px); background: #eef2f6; }
.calc > div { flex: 1 1 100px; min-width: 0; height: 80px; background: #dceefa; }
.calc > div:nth-child(2) { flex-grow: 2; }
.cards { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; }
.cards > li { flex: 1 1 192px; min-width: 0; padding: 16px; background: #e8f5de; overflow-wrap: anywhere; }
</style>
</head>
<body>
<h1>Flex values and space distribution</h1><div class="calc"><div>grow 1</div><div>grow 2</div><div>grow 1</div></div>
<h2>Wrapping card</h2><ul class="cards" role="list"><li>First card</li><li>Second card</li><li>Third card</li><li>Fourth card</li></ul>
</body>
</html>- Perluas browser Anda sehingga .calc memiliki lebar 640px dan gunakan Alat Pengembang untuk memeriksa lebar ketiga item tersebut. Lebarnya akan menjadi 175px·250px·175px. Jika Anda hanya mengubah grow item kedua menjadi 1, ketiga item akan menjadi 200px masing-masing. Setelah membandingkan, kembalikan ke 2.
- Cukup ubah grow di .cards > li menjadi 0 untuk memastikan baris terakhir kartu tidak mengisi lebar ekstra. Jika Anda mengembalikannya ke 1, baris terakhir juga akan menerima ruang.
- Persempit layar untuk melihat apakah lebih sedikit kartu muat dalam satu baris. wrap menentukan baris mana yang akan ditempatkan, dan setiap baris mendistribusikan sisa ruang secara terpisah. Lebar kartu di baris terakhir dan baris sebelumnya tidak harus sama.
- Untuk melihat overflow satu baris alih-alih pemecahan baris, ubah nilai flex-wrap menjadi nowrap dan nilai flex pada item menjadi 0 0 192px. Setelah memeriksa kedua kondisi tersebut, kembalikan wrap asli dan 1 1 192px.
Periksa ukuran minimum otomatis dan teks panjang
Lebar minimum otomatis dari item Flex dapat mencegah area yang berisi alamat panjang atau pengenal diperkecil. Penggunaan min-width: 0 pada item memungkinkan item untuk dikompresi, dan overflow-wrap: anywhere memungkinkan string itu sendiri untuk dibungkus. Mengecilkan kotak tidak secara otomatis memotong teks di dalamnya, jadi Anda perlu membedakan antara kedua masalah tersebut.
Simpan kode di bawah ini sebagai flex-long-text.html. Saya memasukkan identifier panjang tanpa spasi, bukan alamat sebenarnya. Bahkan jika layar diperkecil, teks di samping area panduan dibaca terbagi menjadi beberapa baris. Anda dapat memeriksa aturan pembungkusan baris di deskripsi overflow-wrap MDN.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flex-long-text.html</title>
<style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.notice { display: flex; gap: 12px; max-width: 600px; border: 2px solid #789; padding: 12px; }
.icon { flex: 0 0 48px; background: #ffe4b5; }
.text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; background: #dceefa; }
.text p { margin: 0; }
</style>
</head>
<body>
<h1>Long strings and minimum sizes</h1><div class="notice"><div class="icon">Notice</div><div class="text"><p>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p></div></div>
</body>
</html>- Di .text, cukup ubah overflow-wrap menjadi normal. Bahkan jika lebar item dikurangi, string dapat meluap keluar batas. Kembalikan nilainya ke anywhere.
- Untuk melihat dampak min-width secara terpisah, hapus min-width: 0 sambil mempertahankan overflow-wrap: normal. Setelah menentukan bagaimana ukuran minimum string panjang memengaruhi penempatan item, kembalikan kedua deklarasi ke nilai aslinya.
Jika penyelarasan tidak memungkinkan, pertama periksa sumbu induk dan ruang yang tersisa. Jika ukuran tidak berkurang, periksa ukuran minimum item dan string internal. Jika Anda menaruh overflow: hidden pada seluruh induk untuk menyembunyikan masalah, Anda mungkin kehilangan konten atau indikasi fokus. Lebih mudah untuk menilai hasil jika ukuran tata letak dan tampilan konten diselesaikan secara terpisah.
