Pada video ini, kita akan memulai playlist baru yang secara khusus akan membahas mengenai Flexbox. Apakah itu flexbox? Mari kita lihat definisi Flexbox yang diambil dari situs Mozilla Developer Network atau MDN.

Bisa kita lihat pada layar. Flexbox ini sebenarnya singkatan dari Flexible Box Module, namun lebih banyak dikenal dengan nama flexbox ya. Dan kemudian, kata kunci yang menarik yang berkaitan dengan flexbox ini adalah one-dimensional layout model. Jadi flexbox ini adalah suatu cara untuk melakukan layouting satu dimensi.

Kita telah banyak membahas mengenai CSS Layout pada playlist sebelumnya. Dan pada playlist ini kita kembali akan membahas mengenai layouting, secara khusus dengan cara menggunakan flexbox. Nah, tentunya teman-teman akan bertanya, mengapa mesti menggunakan flexbox? Kenapa tidak menggunakan cara biasa yang telah kita pelajari sebelumnya?

Nah, untuk menjawab pertanyaan ini, kita baca lagi kalimat berikutnya dari definisi MDN ya. Jadi flexbox ini adalah a method that could offer space distribution between items in an interface and powerful alignment capabilities. Jadi dengan menggunakan flexbox ini, kita bisa mengatur pembagian lebar dari masing-masing bagian pada situs kita. Dan flexbox ini juga sangat berguna dalam pengaturan alignment.

Oke, mungkin teman-teman masih bingung ya kalau kita hanya bicara teori saja. Kita lihat prakteknya. Kita buka browser dan kita ketikkan alamat YouTube.

Kita bisa melihat bagian paling atas dari situs YouTube terdiri dari 3 bagian. Pada bagian kiri ada icon hamburger dan logo Youtube. Pada bagian tengah ada bagian search. Sedangkan pada bagian kanan ada 4 buah icon.

Perhatikan pada saat saya mengecilkan ukuran browser. Awalnya jarak antara ketiga bagian tersebut mengecil. Kemudian pada saat jarak ketiganya sudah berdekatan, maka ukuran textbox untuk pencarian menjadi semakin kecil. Dan terakhir pada saat sudah tidak ada tempat lagi untuk textbox, maka bagian pencarian menghilang, diganti menjadi satu icon tambahan di sebelah kanan.

Nah, untuk membuat navigasi seperti ini, kita sudah tidak bisa menggunakan properti width dan margin seperti pelajaran sebelumnya. Kita memerlukan cara pemograman yang lebih flexible untuk pengaturan lebar dan jarak dari masing-masing bagian dalam navigasi. Dalam hal ini kita bisa menggunakan flexbox.

Jadi apabila ada yang bertanya mengapa kita harus menggunakan flexbox? Jawabannya adalah karena dengan menggunakan flexbox, kita bisa mengatur lebar dan jarak dari elemen-elemen kita secara dinamis, walaupun kita tidak tau berapa ukuran browser yang sedang digunakan. Jadi dengan menggunakan flexbox, kita bisa membuat situs kita bersifat responsive. Artinya situs kita akan tetap enak dilihat, baik dari pc, laptop, tablet maupun smartphone.

Sekarang kita masuk ke sesi coding. Kita akan menulis code sederhana untuk membandingkan flexbox dengan float. Disini saya sudah membuat dua buah file, yaitu float.html dan float.css.

Pertama kita isikan kode HTML terlebih dahulu. Kita tambahkan HMTL boilerplate. Lalu kita beri judul Float. Kita tambahkan link menuju float.css.

Selanjutnya, di dalam tag body, kita tambahkan tag section dengan class container. Di dalamnya kita akan membuat 5 buah div dengan nama kelas box, dengan konten nomor urut. Dengan menggunakan package Emmet, kita bisa menuliskan kodenya dengan lebih singkat ya. Pertama kita buka kurung terlebih dahulu. Lalu kita ketik nama elemennya yaitu div, diikuti dengan tanda titik dan nama kelasnya yaitu box. Lalu kita bisa menambahkan kontennya dengan menggunakan kurung kurawal, dan untuk mengambil nilai nomor urut, kita bisa menggunakan tanda $. Kita tutup kurung. Berhubung kita hendak mengulasi proses ini sebanyak 5 kali, maka kita ketik *5. Lalu tekan Ctrl+E.

Sekarang kita sudah memiliki 5 buah div dengan nama kelas box. Di dalam div ada konten yang berupa nomor urut.

Kita pindah ke kode CSS. Pertama kita tambahkan dahulu selector body. Kita beri background color dengan nilai lightblue. Kita simpan dan lihat hasilnya di browser. Oke, sudah sesuai dengan coding kita ya.

Selanjutnya kita tambahkan kelas container. Kita berikan background-color dengan nilai lightyellow. Kita beri width dengan nilai 1000 px. Dan agar posisinya berada di tengah layar, kita tambahkan margin dengan nilai 0 auto.

Lalu kita tambahkan selector kelas box. Kita beri width dengan nilai 150px. Height dengan nilai 150px. Border dengan nilai 2px solid grey. Kita simpan dan lihat hasilnya pada browser.

Tulisan pada box masih kurang besar ya. Agar tulisan bisa lebih terbaca, kita tambahkan properti font-size dengan nilai 4rem.

Kita ingin agar masing-masing kotak memiliki warna yang berbeda-beda ya. Misalnya merah, kuning, hijau, biru, ungu. Kita tambahkan selector kelas red, kita beri background-color: red. Lalu kita ulangi untuk warna-warna lainnya. Setelah itu kita kembali ke kode HTML. Kita tambahkan kelas warna setelah kelas box.

Kita simpan dan lihat hasilnya pada browser. Sekarang kita memiliki 5 buah kotak dengan warna berbeda yang bersusun ke bawah. Untuk mengubah agar kelima kotak ini bersusun ke samping, kita tambahkan property float dengan nilai left pada kelas box.

Warna background kuning muda pada kelas container menjadi hilang ya, karena containernya collapse. Untuk memperbaikinya kita mesti membuat kelas clearfix. Kita isikan dengan content: “”, clear: both dan display: table. Lalu kita ke kode HTML dan pada tag section kita tambahkan kelas clearfix.

Oke, sekarang kita sudah memiliki 5 buah kotak yang bersusun ke samping. Untuk saat ini kita masih menggunakan cara coding dari pelajaran layout sebelumnya ya, yaitu dengan menggunakan properti float. Setelah ini kita akan menuliskan kode yang hasilnya sama seperti ini, namun dengan cara menggunakan Flexbox.

Pertama kode HTML saya save as terlebih dahulu, menjadi flexbox.html. Dan kemudian kode css saya save as menjadi flexbox.css. Kita buka kembali file lama float.html dan float.css, karena nantinya kita akan membandingkan kedua kodenya. Saya tutup sidebar Atom.

Kita buka flexbox.html. Yang pertama kita lakukan adalah kita ubah judulnya menjadi Flexbox. Lalu kita ubah link css-nya menjadi flexbox.css. Setelah itu kita hapus kelas clearfix pada tag section.

Kita buka kode css flexbox. Kita hapus kelas clearfix. Lalu kita hapus properti float pada kelas box. Kita simpan dan lihat hasilnya pada browser. Sekarang kita memiliki 5 buah kotak yang bersusun ke bawah.

Nah, sekarang untuk menggunakan flexbox, kita harus menambahkan satu properti penting, yaitu display dengan nilai flex. Properti ini dapat kita tambahkan pada kelas container. Kita simpan dan refresh browser.

Jadi begitu flexboxnya aktif, kita langsung mendapatkan hasil yang sama dengan float ya. Hanya dengan menambahkan satu properti saja. Jadi kalau kita bandingkan dengan kode pada float, yang pertama di bagian html kita mesti menggunakan class clearfix. Sedangkan pada kode css kita mesti menambahkan properti float dengan nilai left, dan kemudian kita mesti menambahkan kelas clearfix. Penggunaan float lebih repot, karena kita harus melakukan clear pada bagian akhir float. Pada video berikutnya kita akan mempelajari lebih lanjut mengenai pengaturan apa saja yang bisa kita lakukan pada flexbox.

Oke, sampai disini dulu video kita kali ini. Bagi yang ingin mendapatkan source code dari video ini dapat melihat deskripsi pada video. Jangan lupa subscribe ke channel Skysen Solution untuk mendapatkan informasi terbaru dari kami. Dan sampai bertemu lagi di video berikutnya.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.