Flexbox untuk Responsif

Flexbox adalah teknik tata letak CSS yang sangat berguna untuk membuat desain responsif. Dengan menggunakan Flexbox, Anda dapat dengan mudah mengatur elemen-elemen HTML dalam baris atau kolom yang dapat menyesuaikan diri dengan ukuran layar perangkat pengguna.

Langkah 1: Persiapan HTML

Mulailah dengan membuat struktur HTML dasar untuk tata letak Anda. Misalnya:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Langkah 2: Gaya Awal CSS

Tambahkan gaya awal CSS untuk elemen-elemen Anda dan kontainer:

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
  margin: 10px;
}

Langkah 3: Membuat Desain Responsif

Untuk membuat desain ini responsif, Anda bisa menggunakan media queries. Contoh:

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Dengan kode ini, ketika lebar layar kurang dari 768px, kontainer akan beralih menjadi tata letak kolom, membuatnya lebih responsif.

Kesimpulan

Itulah dasar-dasar penggunaan CSS Flexbox untuk desain responsif. Anda dapat menyesuaikan properti-properti seperti display, justify-content, dan flex-direction sesuai dengan kebutuhan desain Anda.

Semoga tutorial ini membantu Anda dalam memahami penggunaan Flexbox untuk tata letak responsif!

PREVIOUS
NEXT