.png)
Flexbox (flexible box) layout atau flex (flexible) layout merupakan salah satu fitur yang terdapat di dalam css yang berfungsi untuk mengatur layout, aligning, dan mengatur space objek dalam sebuah kontainer. Kontainer yang dibuat secara fleksibel dapat mengubah lebar dan tinggi objek di dalamnya agar objek dapat menggunakan space atau ruang yang tersedia. Hal tersebut bermanfaat untuk membuat layout yang sifatnya responsive, misalnya untuk dikonsumsi oleh aplikasi mobile dan web yang sesuai dengan ukuran layar dan device.
Flex container dapat memperbesar objek di dalamnya agar dapat memenuhi ruang kosong yang tersedia, begitu juga mampu untuk memampatkannya agar tidak “overflow”. Flex layout dapat mengatur posisi objek secara vertikal maupun horizontal melalui properti flex-direction, sedangkan kemampuan untuk memperbesar dan memampatkan objek dilakukan dengan mengubah properti flex-wrap.
Properti display dari sebuah kontainer dapat menggunakan nilai flex atau inline-flex. Default display memiliki nilai box yang mengatur objek di dalamnya secara vertikal dan kontainer akan memiliki lebar dengan nilai selebar mungkin sesuai dengan ruang yang tersedia. Nilai flex akan membuat objek di dalam kontainer disusun secara horizontal dengan lebar kontainer yang menyesuaikan dengan lebar ruang yang tersedia, sedangkan nilai inline-flex juga akan menyusun objek secara horizontal namun dengan lebar kontainer yang akan menyesuaikan dengan total dari lebar semua objek di dalam kontainer.
Kontainer yang mengatur objek di dalamnya disebut dengan flex container, sedangkan objek di dalam kontainer tersebut disebut dengan flex items.
Mari kita lakukan simulasi berikut ini. Gunakan code editor sesuai dengan preferensi masing-masing.
1. Buat file html misalnya dengan nama flexbox.html dan ketikkan kode berikut ini di dalamnya:
2. Buat file css misalnya dengan nama style1.css dan ketikkan kode berikut ini di dalamnya:
3. Buat file javascript misalnya dengan nama javascript1.js dan ketikkan kode berikut ini di dalamnya:
Buka file flexbox.html dengan browser dan perhatikan hasil simulasinya dengan klik button-button yang tersedia untuk mengubah properti css yang berhubungan dengan flexbox secara dinamis.
Gambar 1. Default display box menampilkan flex items secara vertikal dan menyisakan ruang kosong sebelah kanan sesuai dengan lebar window browser.
Gambar 2. Flex display menyusun flex items secara horizontal dan lebar flex container akan menyesuaikan dengan lebar window browser sehingga apabila dilihat pada gambar di atas akan menghasilkan ruang kosong disebelah kanan.
Gambar 3. Inline flex display menyusun flex items secara horizontal dan lebar flex container menyesuaikan dari total lebar flex items.
Gambar 4. Inline flex dengan column direction menyusun flex items secara vertikal.
Gambar 5. Inline flex dengan column reverse direction menyusun flex items secara vertikal dan susunannya dimulai dari box paling bawah yaitu box nomor 4.
Gambar 6. Inline flex dengan row direction menyusun flex items secara horizontal.
Gambar 7. Inline flex dengan row direction dan flex-wrap bernilai wrap menyusun flex items secara horizontal dan susunan box nya akan menyesuaikan dengan lebar flex container. Browser di atas diresize windownya sehingga box yang keempat akan berpindah posisinya ke bawah. Apabila window diresize lebih kecil maka box yang ketiga juga akan berpindah ke bawah sejajar dengan box-4.
Selamat mencoba :)