HTML Tingkat Lanjut
Menyusun Tata Letak dengan Flexbox
oleh: Suryo Adhy Chandra, ST
Setelah memahami div, padding, dan margin, pertanyaan
berikutnya biasanya sama: bagaimana menaruh beberapa kotak berdampingan dengan rapi, dan
bagaimana membuatnya tetap enak dilihat di layar ponsel. Dulu pekerjaan ini diakali dengan
float dan tabel, dan hasilnya sering merepotkan. Sekarang ada cara yang jauh
lebih sederhana, yaitu Flexbox.
1. Satu baris yang mengubah segalanya
Flexbox diaktifkan dengan satu properti pada elemen pembungkus. Begitu
display: flex dipasang, seluruh anak di dalamnya otomatis berjajar mendatar.
gap memberi jarak antar-kotak tanpa perlu menambahkan
margin pada masing-masing. Ini lebih rapi karena tidak menyisakan jarak
berlebih di ujung kiri maupun kanan.
2. Dua sumbu yang harus dibedakan
Ini bagian yang paling sering membingungkan. Flexbox mengenal dua arah:
- Sumbu utama, arah berjajarnya kotak. Secara bawaan mendatar, dari kiri ke kanan.
- Sumbu silang, arah tegak lurus terhadap sumbu utama. Secara bawaan menurun dari atas ke bawah.
Properti justify-content mengatur sumbu utama, sedangkan
align-items mengatur sumbu silang. Menghafal keduanya terbalik adalah penyebab
paling umum tata letak tidak sesuai harapan.
3. Menengahkan isi, mendatar dan tegak sekaligus
Menengahkan sesuatu secara tegak dulu terkenal sulit di CSS. Dengan Flexbox, dua baris sudah cukup.
align-items: center terlihat pengaruhnya, pembungkusnya harus punya tinggi.
Kalau tingginya hanya mengikuti isi, tidak ada ruang kosong untuk menengahkan, dan hasilnya
akan tampak tidak berubah. Ini penyebab paling sering keluhan "align-items saya tidak jalan".
4. Mengatur jarak antar-kotak
Nilai justify-content yang paling sering dipakai:
flex-start— semua menempel ke kiri, ini nilai bawaan.center— semua berkumpul di tengah.flex-end— semua menempel ke kanan.space-between— yang pertama menempel kiri, yang terakhir menempel kanan, sisanya dibagi rata.space-around— setiap kotak mendapat ruang kosong di kiri dan kanannya.
Pola space-between inilah yang dipakai hampir semua bilah navigasi: logo di
kiri, tombol masuk di kanan, tanpa perlu menghitung lebar apa pun.
5. Membuat tata letak yang mengikuti lebar layar
Secara bawaan, kotak-kotak Flexbox akan memaksakan diri tetap satu baris meskipun layarnya
sempit, sehingga isinya jadi gepeng. Properti flex-wrap mengizinkan kotak
berpindah ke baris berikutnya kalau sudah tidak muat.
Coba perkecil jendela browser sambil memperhatikan kotak di atas. Kotaknya akan turun sendiri ke baris berikutnya tanpa satu pun aturan tambahan.
flex: 1 1 150px berarti tiga hal sekaligus: kotak boleh melebar bila ada
ruang, boleh menyempit bila ruang kurang, dan lebar dasarnya 150 piksel. Inilah cara paling
ringkas membuat tata letak yang menyesuaikan diri tanpa media query.
6. Mengubah arah menjadi menurun
Kalau ingin kotak tersusun ke bawah alih-alih berjajar, ubah arah sumbu utamanya.
flex-direction diubah menjadi column, arti
justify-content dan align-items ikut bertukar. Sekarang
justify-content mengatur arah tegak dan align-items mengatur arah
mendatar. Ini masuk akal begitu diingat bahwa keduanya mengikuti sumbu, bukan mengikuti arah
layar.
7. Kapan memakai Flexbox dan kapan memakai Grid
CSS punya satu alat tata letak lain bernama Grid. Pembagian yang paling mudah diingat: Flexbox untuk susunan satu arah, entah satu baris atau satu kolom. Grid untuk susunan dua arah, yaitu baris dan kolom sekaligus seperti tabel.
Untuk bilah navigasi, deretan tombol, atau daftar kartu, Flexbox biasanya sudah cukup dan lebih sederhana. Untuk tata letak halaman utuh dengan sidebar, header, dan konten, Grid sering lebih tepat.
8. Latihan
- Buat bilah navigasi dengan logo di kiri dan tiga menu di kanan memakai
space-between. - Buat halaman berisi enam kartu produk yang otomatis turun ke baris baru saat layar disempitkan.
- Buat kotak berisi tulisan yang berada tepat di tengah layar, baik mendatar maupun tegak.
min-height: 100vh agar
tingginya setinggi layar, sehingga ada ruang untuk menengahkan secara tegak.