Flexbox - Ikhtisar
Cmenaik Style Sheets (CSS) adalah bahasa desain sederhana yang dimaksudkan untuk menyederhanakan proses pembuatan halaman web yang rapi. CSS menangani tampilan dan nuansa bagian dari halaman web.
Dengan menggunakan CSS, Anda dapat mengontrol warna teks, gaya font, jarak antar paragraf, bagaimana ukuran dan tata letak kolom, gambar latar atau warna apa yang digunakan, desain tata letak, variasi tampilan untuk berbagai perangkat dan ukuran layar. serta berbagai macam efek lainnya.
Untuk menentukan posisi dan dimensi kotak, di CSS, Anda dapat menggunakan salah satu mode tata letak yang tersedia -
The block layout - Mode ini digunakan untuk meletakkan dokumen.
The inline layout - Mode ini digunakan untuk meletakkan teks.
The table layout - Mode ini digunakan untuk menyusun tabel.
The table layout - Mode ini digunakan untuk memposisikan elemen.
Semua mode ini digunakan untuk menyelaraskan elemen tertentu seperti dokumen, teks, tabel, dll., Namun, tidak ada yang memberikan solusi lengkap untuk menata situs web yang rumit. Awalnya ini digunakan untuk dilakukan dengan menggunakan kombinasi elemen mengambang, elemen posisi, dan tata letak tabel (sering kali). Tetapi pelampung hanya memungkinkan untuk memposisikan kotak secara horizontal.
Apa itu Flexbox?
Selain mode yang disebutkan di atas, CSS3 menyediakan mode tata letak Kotak Fleksibel lainnya, biasanya disebut sebagai Flexbox.
Dengan menggunakan mode ini, Anda dapat dengan mudah membuat tata letak untuk aplikasi dan halaman web yang kompleks. Tidak seperti pelampung, tata letak Flexbox memberikan kontrol penuh atas arah, penyelarasan, urutan, ukuran kotak.
Fitur Flexbox
Berikut adalah fitur-fitur penting dari tata letak Flexbox -
Direction - Anda dapat menyusun item pada halaman web ke segala arah seperti kiri ke kanan, kanan ke kiri, atas ke bawah, dan bawah ke atas.
Order - Dengan menggunakan Flexbox, Anda dapat mengatur ulang urutan konten halaman web.
Wrap - Jika ada ruang yang tidak konsisten untuk konten halaman web (dalam satu baris), Anda dapat menggabungkannya menjadi beberapa baris (baik secara horizontal) dan vertikal.
Alignment - Menggunakan Flexbox, Anda dapat menyelaraskan konten halaman web sehubungan dengan wadahnya.
Resize - Dengan menggunakan Flexbox, Anda dapat menambah atau mengurangi ukuran item di halaman agar sesuai dengan ruang yang tersedia.
Browser pendukung
Berikut adalah browser yang mendukung Flexbox.
- Chrome 29+
- Firefox 28+
- Internet Explorer 11+
- Opera 17+
- Safari 6.1+
- Android 4.4+
- iOS 7.1+