CSS flexbox - Persiapan

Flexible box atau bisa kita sebut flexbox ini akan mengatur ukuran dari itemnya secara otomatis, dan mampu beradaptasi dengan ukuran containernya. Sebelumnya kita sudah mengenal mode block, inline, table dan lainnya. Kita juga sering melibatkan floating untuk layout, padahal float sendiri bukan diperuntukan untuk membat layout melainkan untuk memposisikan gambar dalam text.

Permasalahan paling sederhana yang mampu diselesaikan oleh Flexbox adalah vertical centering atau memosisikan element tepat berada di tengah) serta mengukur agar setiap kolom berada dalam grid layout memiliki tinggi yang sama.

Persiapan

Kita akan ajak untuk menyelesaikan permasalahan sobat dalam memahami konsep dasar dari flexbox, cara penggunaan property-property yang berhubungan dengan flexbox dan akan diakhiri dengan study kasus flexbox.

Sebelum kita memulai belajar flexbox, kita akan membuat tampilan sederhana untuk membantu kita dalam mempelajari flexbox. tulis kode sebagai berikut pada file index.html dengan menggunakan text editor kesayangan sobat.

<div class="wrap">
  <div class="kotak warna1">1</div>
  <div class="kotak warna2">2</div>
  <div class="kotak warna3">3</div>
  <div class="kotak warna4">4</div>
  <div class="kotak warna5">5</div>
</div>

Kita tambahkan style standart agar tampilannya lebih menarik dan memberikan warna pada masing-masing box.

/* Style standar */
*{
margin:0;
  box-sizing:border-box
}

.wrap{
  background:#f4f6f9;
}

.kotak{
  padding:30px;
  color:#fff;
  font-size:1em;
  text-shadow:0 1px 1px rgba(0,0,0,.2);
  text-align:center;
}

.warna1{background-color:#2fcc72}
.warna2{background-color:#3498db}
.warna3{background-color:#f1c40f}
.warna4{background-color:#e67e22}
.warna5{background-color:#e74c3c}

Maka kurang lebih tampilan yang kita dapatkan seperti berikut:

Dari hasil yang kita lihat bersama bahwa setiap div akan ditampilkan di baris baru, karena memang sifat default dari div itu adalah block.

Selanjutnya kita akan membahas: Flex Container Open URL