Apa Itu Flexbox Pada CSS3

11/02/2017    Ekky Ridyanto    362     Website

Hai semuanya kali ini kita akan belajar seputar Flexbox. Flexbox adalah sistem layouting didalam CSS3. Jadi disini kita akan membuat sistem layouting yang flexsibel dengan menggunakan flexbox ini yang mana kita dapat mengatur beberapa box dengan sangat mudah. Dalam menggunakannya teman teman harus perhatikan browser mana yang sudah support baik itu firefox chrome atau pun opera dan agar lebih aman teman teman diharus untuk menggunakan vendor prefix untuk setiap propertynya. Pada bagian ini kita akan lihat property apa saja yang dapat kita gunakan dan kita pun akan lihat contoh contohnya dalam penggunaan flexbox. Langsung saja kita akan memulainya aturan yang pertama ketika kita menggunakan flexbox selalu ada parent dan childnya artinya kita harus membuatkan sebuah pembungkus sebagai box parentnya dan didalamnya sendiri akan ada item item dari boxnya sebagai childnya seperti ini

Apa-itu-Flexbox-Pada-CSS3-11-02-2017-1

kita akan atur sedikit CSSnya agar lebih menarik yang mana class item-nya akan saya berikan background color lalu warna tulisanya kita kasih warna putih dan memiliki ukuran tulisannya 30px

Apa-itu-Flexbox-Pada-CSS3-11-02-2017-2

bila kita lihat lebar <div> nya yang mana lebarnya akan mengambil seluruh lebar dari body. Untuk itu saya berikan lebar dan tinggi yang sama sebagai berikut

Apa-itu-Flexbox-Pada-CSS3-11-02-2017-3

cukup banyak CSS yang kita buat. Tentu itu kreasinya teman teman. Bila saya jalankan maka <div> nya akan berada pada masing masing barisnya. Berikutnya pada bagian class box parentnya kita tambahkan property display nilainya flex sebagai berikut

Apa-itu-Flexbox-Pada-CSS3-11-02-2017-4

maka dengan display flex hasilnya akan otomatis membuat semua box didalamnya akan sejajar secara horizontal dan berada di sampingnya seperti ini

Apa-itu-Flexbox-Pada-CSS3-11-02-2017-5

lalu hal keren lagi kita bisa mengatur flex-direction atau arah kolomnya secara default nilainya row kita bisa ubah nilainya menjadi row-reverse 

Apa-itu-Flexbox-Pada-CSS3-11-02-2017-6

Maka hasilnya berada disebelah kanan browser yang mana nilai ini sama seperti penggunaan float right dan bila kita ingin menampilkan dari atas kebawah atau secara vertical maka gunakan column artinya boxnya tampil secara vertical dan tampil berdasarkan urutannya

Apa-itu-Flexbox-Pada-CSS3-11-02-2017-7

dan kita pun bisa mengatur urutan menjadi terbalik yang mana mulai dari D sampai A yaitu kita kasih nilainya column-reverse

Apa-itu-Flexbox-Pada-CSS3-11-02-2017-8

Sejauh ini kita berhasil menerapkan beberapa property dari Flexbox dan itulah kelebihan atau kekuatan dari Flexbox dalam mengatur Layouting pada sebuah website. Kita tidak perlu lagi mengatur layout dengan table atau pun property floatnya. Terima kasih.

HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More