Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

CSS Flexbox Dasar: Flex Container vs Flex Items

Kunci utama memahami Flexbox adalah mengetahui bahwa ada properti yang hanya berlaku untuk induk dan ada yang hanya berlaku untuk anak.

1. Flex Container (Sang Induk)

Flex Container adalah elemen pembungkus. Untuk mengaktifkan Flexbox, Anda cukup memberikan properti display: flex; atau display: inline-flex; pada elemen ini.

Begitu properti ini diberikan, elemen induk tersebut mendapatkan kendali penuh atas bagaimana anak-anaknya disusun. Properti utama pada kontainer meliputi:

• flex-direction: Menentukan arah (baris atau kolom).

• justify-content: Mengatur perataan secara horizontal (sumbu utama).

• align-items: Mengatur perataan secara vertikal (sumbu silang).

2. Flex Items (Sang Anak)

Semua elemen yang berada langsung di dalam Flex Container secara otomatis menjadi Flex Items. Mereka akan tunduk pada aturan yang dibuat oleh induknya, namun tetap memiliki properti individu untuk mengatur diri mereka sendiri.

Properti utama pada item meliputi:

• flex-grow: Kemampuan untuk membesar mengisi ruang kosong.

• flex-shrink: Kemampuan untuk mengecil jika ruang menyempit.

• order: Mengatur urutan kemunculan tanpa mengubah urutan di HTML.

3. Konsep Main Axis dan Cross Axis

Satu hal yang membedakan Flexbox dengan sistem lain adalah adanya konsep Sumbu Utama (Main Axis) dan Sumbu Silang (Cross Axis).

• Jika flex-direction adalah row (baris), maka Main Axis berjalan horizontal.

• Jika flex-direction adalah column (kolom), maka Main Axis berjalan vertikal.

Memahami sumbu ini sangat penting karena properti justify-content selalu bekerja pada Main Axis.

Tutorial: Membuat Baris Menu (Navbar) Sederhana

Mari kita terapkan Flexbox untuk menyusun navigasi pada proyek SatuMedia.

Struktur HTML

<nav class="navbar"> <div class="logo">SatuMediadiv> <ul class="nav-links"> <li>Homeli> <li>Newsli> <li>Contactli> ul>
nav>

Kode CSS

.navbar { display: flex; /* Mengaktifkan Flexbox pada Induk */ justify-content: space-between; /* Logo di kiri, Menu di kanan */ align-items: center; /* Rata tengah secara vertikal */ padding: 10px 20px; background-color: #3498db; color: white;
} .nav-links { display: flex; /* Ul juga menjadi kontainer bagi Li */ list-style: none; gap: 20px; /* Memberi jarak antar item menu */
}

Tips Pro untuk Developer

1. Satu Tingkat Saja: Ingat bahwa properti Flexbox dari induk hanya memengaruhi anak langsung. Jika Anda punya cucu (elemen di dalam elemen anak), cucu tersebut tidak akan terpengaruh kecuali Anda menjadikan si anak sebagai display: flex juga (Nested Flexbox).

2. Menengahkan Elemen: Cara tercepat menengahkan elemen di dalam kotak adalah dengan kombinasi display: flex; justify-content: center; align-items: center;.

3. Gap: Daripada menggunakan margin pada setiap item, gunakan properti gap pada kontainer untuk mengatur jarak antar item dengan lebih rapi.