Flexbox Responsive di CSS: Cara Membuat dan Contoh Codenya

Section Artikel

1 Flexbox Responsif
2 Galeri Gambar Responsif menggunakan Flexbox
3 Situs Web Responsif menggunakan Flexbox
4 Properti Flexbox CSS

Flexbox Responsif

Sebelumnya, kita telah mempelajari Media Queri, dimana media kueri dapat membuat layout yang berbeda untuk berbagai ukutan layar dan perangkat.

Misalnya, jika kita ingin membuat tata letak dua kolom untuk sebagian besar ukuran layar dan tata letak satu kolom untuk ukuran layar kecil (seperti ponsel dan tablet), kita mengubah flex-direction dari row ke column secara spesifik. breakpoint (800px pada contoh di bawah):

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 50%;
}

.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<h1>Responisve Flexbox</h1>

<p> "flex-direction: row;" menumpuk item flex secara horizontal (dari kiri ke kanan). </p>
<p> "flex-direction: column;" menumpuk item flex secara vertikal (dari atas ke bawah). </p>
<p> <b> Ubah ukuran jendela browser untuk melihat bahwa arah berubah saat
ukuran layar lebar 800px atau lebih kecil. </b> </p>

<div class="flex-container">
  <div class="flex-item-left">1</div>
  <div class="flex-item-right">2</div>
</div>

</body>
</html>

Cara lain adalah mengubah persentase properti item flex untuk membuat tata letak yang berbeda pada ukuran layar yang berbeda. Perhatikan bahwa kita juga harus menyertakan flex-wrap: wrap; pada kontainer flex agar contoh berikut bisa bekerja :

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 50%;
}

.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}
</style>
</head>
<body>

<h1>Responsive Flexbox</h1>
<p> Dalam contoh ini, kami mengubah persentase flex untuk membuat tata letak yang berbeda untuk ukuran layar yang berbeda. </p>
<p> <b> Ubah ukuran jendela browser untuk melihat bahwa arah berubah saat
ukuran layar lebar 800px atau lebih kecil. </b> </p>
<div class="flex-container">
  <div class="flex-item-left">1</div>
  <div class="flex-item-right">2</div>
</div>

</body>
</html>

Galeri Gambar Responsif menggunakan Flexbox

Gunakan flexbox untuk membuat galeri gambar responsif yang bervariasi antara empat, dua atau gambar lebar penuh, tergantung pada ukuran layar:

Contoh :

<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>

<!-- Header -->
<div class="header">
  <h1>Responsive Image Grid</h1>
  <p> Ubah ukuran jendela browser untuk melihat efek responsif. </p>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/39a1c4a92c2dc98d7676c2cdb63c2683.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" style="width:100%">
  </div>
  
  <div class="column">
   <img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/39a1c4a92c2dc98d7676c2cdb63c2683.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" style="width:100%">
  </div> 
   
  <div class="column">
     <img src="https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/39a1c4a92c2dc98d7676c2cdb63c2683.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/2608247125.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" style="width:100%">
  </div>
</div>

</body>
</html>

Situs Web Responsif menggunakan Flexbox

Gunakan flexbox untuk membuat situs web responsif, yang berisi bilah navigasi fleksibel dan konten fleksibel:

Contoh :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Style the top navigation bar */
.navbar {
  display: flex;
  background-color: #333;
}

/* Style the navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}
</style>
</head>
<body>

<!-- Note -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">Ubah ukuran browser untuk melihat flexbox responsive.</h4>
</div>

<!-- Header -->
<div class="header">
  <h1>My Website</h1>
  <p>menggunakan<b>flexible</b> layout.</p>
</div>

<!-- Navigation Bar -->
<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<!-- The flexible grid (content) -->
<div class="row">
  <div class="side">
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <img src="https://dosenit.com/wp-content/uploads/2020/10/36f88c4d3791007c61af1a2132671d0f.jpg" style="width:100%" >
    <p>text....</p>
    <h3>Pemandangan</h3>
    <p>beberapa pemandangan.</p>
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" style="width:100%">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Pagoda-Chureito.jpg" style="width:100%">
  </div>
  <div class="main">
    <h2>Anime</h2>
    <h5>Kimi No Nawa Cover</h5>
    <img src="https://dosenit.com/wp-content/uploads/2020/10/21236-shinkai-makoto-work-kimi-no-na-wa-your-name-art-book.jpg" style="width:100%" >
    <p>Anime</p>
    <p>Kimi no Nawa termasuk anime yang best dan sangat direkomendasikan untuk menontonnya.</p>
    <br>
    <h2>Anime</h2>
    <h5>Kimi No Nawa The Best</h5>
    <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" style="width:100%" >
    <p>Anime Makoto Shinkai</p>
    <p>Rekomendasi anime romace</p>
  </div>
</div>

<!-- Footer -->
<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>

Properti Flexbox CSS

Property	Deskripsi
display	Menentukan jenis kotak yang digunakan untuk elemen HTML
flex-direction	Menentukan arah item fleksibel di dalam wadah fleksibel
justify-content	Menyelaraskan item flex secara horizontal ketika item tidak menggunakan semua ruang yang tersedia di main-axis
align-items	Menyelaraskan item flex secara vertikal saat item tidak menggunakan semua ruang yang tersedia pada sumbu silang
flex-wrap	Menentukan apakah item flex harus dibungkus atau tidak, jika tidak ada cukup ruang untuk mereka pada satu baris flex
align-content	Mengubah perilaku properti flex-wrap. Ini mirip dengan menyelaraskan item, tetapi bukannya menyelaraskan item fleksibel, ini menyelaraskan garis fleksibel
flex-flow	Properti singkatan untuk flex-direction dan flex-wrap
order	Menentukan urutan item fleksibel relatif terhadap item flex lainnya di dalam penampung yang sama
align-self	Digunakan pada item fleksibel. Mengganti properti align-items penampung
flex	Properti singkatan untuk properti flex-grow, flex-shrink, dan flex-basis

CSS Flexbox

Flexbox Responsive di CSS: Cara Membuat dan Contoh Codenya

Flexbox Responsif

Galeri Gambar Responsif menggunakan Flexbox

Situs Web Responsif menggunakan Flexbox

Properti Flexbox CSS

User Interface CSS: Cara Membuat dan Codenya

Contoh MQ di CSS: Cara Membuat dan Codenya

You may also like