CSS Flexbox

CSS Flexbox, atau Flexible Box Layout, adalah model layout di CSS yang digunakan untuk mengatur elemen dalam satu baris atau kolom dengan mudah. Flexbox sangat berguna untuk membuat layout yang responsif dan fleksibel, memungkinkan elemen menyesuaikan ukurannya secara dinamis.

Mengaktifkan Flexbox

Untuk menggunakan Flexbox, tambahkan properti display: flex; pada elemen induk (container). Semua elemen di dalam container tersebut akan menjadi flex items yang dapat diatur posisinya.

.container {
    display: flex;
}

Properti Flexbox pada Container

Berikut adalah beberapa properti yang dapat digunakan pada elemen container untuk mengatur posisi dan perilaku flex items:

1. flex-direction

Menentukan arah susunan elemen. Nilai yang umum digunakan adalah:

• row: Menyusun elemen dalam satu baris (default).
• column: Menyusun elemen dalam satu kolom.

.container {
    flex-direction: row;
}

2. justify-content

Mengatur perataan elemen di sepanjang sumbu utama (horizontal atau vertikal tergantung flex-direction).

• flex-start: Elemen rata ke awal container.
• flex-end: Elemen rata ke akhir container.
• center: Elemen berada di tengah container.
• space-between: Elemen tersebar dengan jarak sama di antara mereka.
• space-around: Elemen tersebar dengan jarak yang merata.

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

3. align-items

Mengatur perataan elemen di sepanjang sumbu sekunder (biasanya vertikal jika flex-direction adalah row).

• flex-start: Elemen rata ke atas.
• flex-end: Elemen rata ke bawah.
• center: Elemen berada di tengah.
• stretch: Elemen memperluas untuk memenuhi container.

.container {
    align-items: center;
}

Properti Flexbox pada Items

Selain container, Flexbox juga menyediakan properti yang dapat diterapkan pada setiap flex item untuk mengatur ukurannya.

1. flex-grow

Menentukan kemampuan elemen untuk tumbuh sesuai ruang yang tersedia. Nilai default adalah 0, yang berarti elemen tidak akan tumbuh.

.item {
    flex-grow: 1;
}

2. flex-shrink

Menentukan kemampuan elemen untuk menyusut jika ruang terbatas. Nilai default adalah 1, yang berarti elemen dapat menyusut.

.item {
    flex-shrink: 1;
}

3. flex-basis

Menentukan ukuran awal elemen sebelum flex-grow atau flex-shrink diterapkan. Dapat diatur dalam satuan piksel, persen, atau auto.

.item {
    flex-basis: 200px;
}

Contoh Layout dengan Flexbox

Berikut adalah contoh kode untuk membuat layout dengan Flexbox:

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

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.item {
    padding: 20px;
    background-color: #007BFF;
    color: white;
}

Pada contoh di atas, ketiga elemen flex items (Item 1, Item 2, dan Item 3) ditempatkan dengan jarak merata di dalam container menggunakan justify-content: space-around dan diselaraskan di tengah secara vertikal dengan align-items: center.

Kesimpulan

Flexbox adalah alat yang sangat berguna dalam CSS untuk membuat layout yang fleksibel dan responsif. Dengan memahami properti Flexbox seperti flex-direction, justify-content, align-items, dan properti pada flex items seperti flex-grow dan flex-basis, Anda dapat dengan mudah membuat tata letak halaman yang dinamis tanpa bergantung pada teknik float yang lebih tua.