Generator Flexbox
Atur properti dan baca, dalam bahasa sederhana, apa yang sebenarnya dilakukannya.
- Berjalan di browser Anda — teks Anda tidak pernah dikirim ke mana pun
- Tanpa pendaftaran, tanpa kuota, gratis dipakai sesering yang Anda mau
Cara kerjanya
Flexbox tidak rumit, tetapi satu hal tentangnya menjebak hampir semua orang: justify-content dan align-items tidak berarti horizontal dan vertikal. Keduanya berarti sepanjang arah dan melintang arah, dan arah itu adalah sesuatu yang Anda atur.
Jebakannya, dinyatakan secara langsung
Dengan flex-direction: row, justify-content bekerja secara horizontal dan align-items secara vertikal. Beralih ke column dan keduanya bertukar sepenuhnya. Setiap jam yang terbuang pada flexbox pada dasarnya karena hal ini. Penjelasan di bawahnya diperbarui saat Anda mengubah arah sehingga hubungannya terlihat, bukan dihafalkan.
Sumbu utama dan sumbu silang
Sumbu utama adalah sumbu tempat item mengalir, ditentukan oleh flex-direction. Sumbu silang tegak lurus terhadapnya. justify-content mendistribusikan ruang sepanjang sumbu utama; align-items memosisikan item pada sumbu silang. Begitu kedua nama itu melekat, sisanya mengikuti.
gap, dan mengapa ia menggantikan margin
gap memberi ruang di antara item tanpa menambahkannya di luar item pertama dan terakhir, yang persis menjadi kelemahan margin dan yang dulu diperbaiki orang dengan trik :last-child. Ini didukung di setiap browser saat ini dan tidak ada lagi alasan untuk menghindarinya.
nowrap berarti menyusut, bukan meluap
Nilai bawaannya adalah nowrap, dan item menyusut di bawah ukuran alaminya agar muat, bukan pindah ke baris baru. Itulah sebabnya teks kadang terjepit tanpa diduga di dalam baris flex. Mengatur wrap membuat item turun ke baris berikutnya; min-width: 0 pada elemen anak mencegahnya menyusut melewati isinya.
Menengahkan ke dua arah
justify-content: center dengan align-items: center menengahkan item di kedua arah apa pun flex-direction-nya, yang merupakan satu-satunya kombinasi yang layak dihafal begitu saja.
Generator Flexbox — pertanyaan
Mengapa align-items menggerakkan elemen secara horizontal?
Karena flex-direction adalah column. Kedua properti mengikuti arah, bukan layar.
Apa perbedaan antara sumbu utama dan sumbu silang?
Sumbu utama adalah arah aliran item, ditentukan oleh flex-direction. Sumbu silang tegak lurus terhadapnya.
Bagaimana cara menengahkan sesuatu ke dua arah?
justify-content: center bersama align-items: center.
Mengapa teks saya terjepit?
Nilai bawaan nowrap mengecilkan item agar muat. Atur flex-wrap: wrap, atau min-width: 0 pada elemen anak.
Bisakah saya memakai gap dengan flexbox?
Ya, di setiap browser saat ini. Ini lebih baik daripada margin karena tidak menambah ruang di ujung-ujungnya.