Tata Letak dengan Flexbox

1. Apa Itu Flexbox? Flexbox, atau Flexible Box Layout, adalah model tata letak di CSS yang dirancang untuk memberikan kontrol penuh atas perataan, distribusi ruang, dan penempatan elemen dalam suatu kontainer. Flexbox sangat berguna untuk membuat tata letak yang responsif dan fleksibel.

2. Elemen Penting Flexbox Flexbox memiliki dua elemen utama:

Flex Container: Elemen induk yang memiliki properti display: flex;.
Flex Items: Elemen anak di dalam flex container.

Contoh:

.container {
  display: flex;
}

3. Properti Flex Container Flex container memiliki beberapa properti yang memengaruhi tata letak anak-anaknya:

flex-direction: Menentukan arah tata letak.
- row (default): Elemen diatur secara horizontal.
- row-reverse: Elemen diatur horizontal dari kanan ke kiri.
- column: Elemen diatur secara vertikal.
- column-reverse: Elemen diatur vertikal dari bawah ke atas.

.container { flex-direction: row; }

justify-content: Mengatur perataan elemen sepanjang sumbu utama.
- Nilai: flex-start, flex-end, center, space-between, space-around, space-evenly.

.container { justify-content: center; }

align-items: Mengatur perataan elemen sepanjang sumbu silang.
- Nilai: stretch (default), flex-start, flex-end, center, baseline.

.container {
align-items: center;
}

flex-wrap: Menentukan apakah elemen akan membungkus ke baris berikutnya jika ruang habis.
- Nilai: nowrap (default), wrap, wrap-reverse.

.container {
flex-wrap: wrap;
}

4. Properti Flex Items Setiap elemen dalam flex container dapat memiliki properti tambahan:

order: Menentukan urutan elemen.

.item {
order: 2;
}

flex-grow: Menentukan apakah elemen dapat tumbuh untuk mengisi ruang kosong.

.item {
flex-grow: 1;
}

flex-shrink: Menentukan apakah elemen dapat menyusut jika ruang tidak cukup.

.item {
flex-shrink: 1;
}

flex-basis: Menentukan ukuran dasar elemen sebelum ruang dibagi.

.item {
flex-basis: 200px;
}

5. Contoh Praktis: Membuat Layout dengan Flexbox HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

CSS (style.css):

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
}

.item {
  background-color: lightblue;
  padding: 20px;
  margin: 10px;
  text-align: center;
  border: 1px solid navy;
}

Hasil: Tiga kotak akan diratakan secara horizontal dengan ruang di antaranya, semuanya sejajar di tengah secara vertikal.

Kesimpulan: Dalam seri ini, Anda telah mempelajari dasar-dasar Flexbox, termasuk properti untuk flex container dan flex items. Di seri berikutnya, kita akan menjelajahi Grid Layout untuk tata letak yang lebih kompleks!

Pos Terkait

Yandi Novia

Pada tahun 2010 saya memulai membangun sebuah blog. Belajar menulis, mengedit, dan belajar hal-hal baru seperti desain grafis dengan corel draw, membangun web hingga menerima jasa pembuatan web, video editing, dan content creator. Saya juga pekerja freelance pada bidang komunikasi dan mobilisasi sosial. Mari Berteman!