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

 

21 Oktober 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat