React · pelajaran 4
Layout web: flexbox dan layar sempit
Setiap elemen adalah kotak
Buka tab Layout, tekan Pilih elemen, lalu klik sebuah kartu. Kamu melihat model kotak-nya:
- konten (biru): isi elemen,
- padding (hijau): ruang di dalam, antara isi dan tepi,
- margin (oranye): ruang di luar, antara elemen dan tetangganya.
Centang garis semua kotak untuk melihat semuanya sekaligus.
Flexbox
Secara default, <article> adalah display: block: menumpuk ke bawah, masing-masing selebar induknya. Dengan flexbox, induk mengatur anak-anaknya:
.daftar {
display: flex; /* anak berjajar di sumbu utama (default: mendatar) */
gap: 16px; /* jarak antar anak */
}
.daftar .kartu {
flex: 1; /* setiap kartu mengambil bagian sisa ruang yang sama */
}Pilih elemen .daftar di tab Layout: panah biru menunjukkan arah sumbu utamanya.
Layar sempit
Tarik tepi kanan jendela browser di pratinjau (atau pilih iPhone). Di layar sempit, tiga kartu berjajar menjadi terlalu kecil. Media query mengganti aturan saat lebar layar memenuhi syarat:
@media (max-width: 600px) {
.daftar { flex-direction: column; }
}Misi
Buat kartu berjajar dan sama lebar di lebar 900px, dan bertumpuk (tanpa keluar layar) di 420px. Saat dicek, playground mengubah lebar jendela sendiri.
Selanjutnya: Dari web ke React Native · Semua pelajaran