Membuat Layout Web Responsive Dengan Flexbox

Membuat Layout Web Responsive Dengan Flexbox

Layout Web Responsive berarti layout web tersebut dapat dibuka dengan baik di semua platform/perangkat.

Membuat layout responsive penting, karena pengunjung web kita tidak hanya membuka web dari satu perangkat saja, ada yang dari laptop ada juga dari handphone.

Salah satu cara membuat layout responsive adalah menggunakan fitur flexbox di CSS 3.

Dengan flexbox kita dapat mengatur website kita dimasing-masing platform/perangkat.

Langsung saja berikut langkah-langkah membuat layout responsive dengan flexbox.

Buat Struktur Dasar

Buat struktur dasar html seperti dibawah ini

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layout Web</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <header>Header</header>
  <main>
    <article>Article</article>
    <nav>Nav</nav>
    <aside>Aside</aside>
  </main>
  <footer>Footer</footer>

</body>
</html>

Save, lalu buka di browser

Struktur Dasar

Mulai Mengatur Layout

Buat sebuah file, beri nama style.css. Lalu kita mulai mengisi file tersebut.

Pertama tama kita atur bagian body supaya tidak ada margin, mengatur font menjadi sans-serif, dan menambahkan flex pada body.

body {
  margin: 0;
  font-family: sans-serif;
  display: flex;
  flex-wrap: wrap;
}

Di bagian header, kita beri warna pada text dan background, lalu kita atur supaya lebarnya menjadi full, mengatur tulisan menjadi rata tengah, dan memberi padding 2rem.

header {
  background-color: blue;
  color: #fff;
  padding: 2rem;
  text-align: center;
  width: 100%;
}

Di bagian main, kita atur supaya dia menjadi wadah flex bagi article dan aside, lalu atur lebar menjadi 80% supaya memberi jarak pada kanan kiri, dan kita atur jarak ke atas 2rem dan membuat elemen menjadi rata tengah.

main {
  width: 80%;
  display: flex;
  margin: 2rem auto;
  flex-wrap: wrap;
}

Pada bagian article, kita atur lebarnya menjadi 70%, lalu atur background, padding, dan tingginya.

article {
  width: 70%;
  background-color: whitesmoke;
  padding: 2rem;
  height: 300px;
}

Aside, kita atur background, padding, lalu kita atur lebarnya menjadi 30%, dan kita beri margin left sebagai jarak ke main diatas.

aside {
  background-color: lightblue;
  padding: 2rem;
  width: 30%;
  margin-left: 20px;
}

Dan yang terakhir kita atur bagian footer sama dengan header

footer {
  width: 100%;
  margin: 2rem 0;
  background-color: blue;
  color: #fff;
  text-align: center;
  padding: 2rem;
}

Sekarang coba buka/refresh browser, maka akan muncul tampilan seperti berikut.

Layout Web

Sekarang coba kecilkan window browser, maka akan terlihat layout main menjadi menumpuk/tidak responsive.

Tidak Responsive

Mengatur Responsive

Kita akan membuat sebuah logika dimana ketika lebar window itu kurang dari 576px, maka ukuran lebar dari main, dan aside akan menjadi 100%.

Sehingga tampilan web akan menjadi lebih rapi dan juga responsive.

Tambahkan kode berikut di paling bawah file style.css

@media (max-width: 576px) {
  article {
    width: 100%;
  }
  aside {
    width: 100%;
    margin: 0;
  }
}

Sekarang coba buka/refresh browser maka tampilan yang tadinya menumpuk akan berubah menjadi rapi dan responsive.

Responsive

Dan berikut hasil akhir file style.css.

body {
  margin: 0;
  font-family: sans-serif;
  display: flex;
  flex-wrap: wrap;
}
header {
  background-color: blue;
  color: #fff;
  padding: 2rem;
  text-align: center;
  width: 100%;
}
main {
  width: 80%;
  display: flex;
  margin: 2rem auto;
  height: 300px;
  flex-wrap: wrap;
}
article {
  width: 70%;
  background-color: whitesmoke;
  padding: 2rem;
}
aside {
  background-color: lightblue;
  padding: 2rem;
  width: 30%;
  margin-left: 20px;
}
footer {
  width: 100%;
  margin: 2rem 0;
  background-color: blue;
  color: #fff;
  text-align: center;
  padding: 2rem;
}

@media (max-width: 576px) {
  article {
    width: 100%;
  }
  aside {
    width: 100%;
    margin: 0;
  }
}

Itulah cara membuat layout web yang responsive, untuk selanjutnya silahkan kembangkan sendiri.

Related Post

Comments

X