Membuat Responsive Layout dengan Flexbox

Membuat layout responsive dengan flexbox – Hallo semuanya, apa kabarnya hari ini, pada artikel kali ini kita akan memahami tentang fitur CSS3 yaitu 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.
Baiklah, mari kita mulai dengan pertama kali kita aka membuat struktur dasar html sederhana seperti berikut

<header>Header</header>
  <div id="main">
    <article>Article</article>
    <nav>Nav</nav>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>

Kita hanya membutuhkan beberapa elemen utama saja untuk dijadikan sebuah layout. Selanjutnya kita akan memberikan css dasar dan sedikit style pada #main yang akan kita jadikan sebagai flex container dengan css seperti berikut

* {
  box-sizing: border-box;
}
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
}
#main {
  display: flex;
  flex: 1;
}

Lalu kita akan memberikan pengaturan flex pada article, nav dan aside dengan css seperti berikut

#main > article {
  flex: 1;
}
#main > nav,
#main > aside {
  flex: 0 0 20vw;
  background: beige;
}
#main > nav {
  order: -1;
}

Jika sudah kita akan memberikan sedikit styling untuk header dan footer, serta memberikan jarak bagi setiap elemen yang ada dengan css seperti berikut

header, footer {
  background: yellowgreen;
  height: 20vh;
}
header, footer, article, nav, aside {
  padding: 1em;
}

Yang terakhir adalah saatnya kita membuat sebuah rule untuk mengatur layout agar menjadi responsive. Kali ini kita coba memberikan rule ketika elemen berada pada lebar layer dibawah 575px dengan memberikan display:block agar semua elemen tersusun secara vertikal dengan css seperti berkut

@media screen and (max-width: 575px) {
  #main {
    display: block;
  }
}

Baiklah teman teman, mudah bukan, dengan mengetahui penggunaan flexbox kalian bisa lebih leluasa dalam mengatur konten dan membagi kolom pada sebuah website. Demikian artikel kali ini yang membahas tentang cara membuat layout responsive menggunakan flexbox. Semoga bermanfaat