Dulu, orang bikin layout pakai float atau table yang bikin kepala mau meledak karena kalau satu elemen geser, semua berantakan. Sekarang ada Flexbox, penyelamat umat front-end developer.

Apa itu Flexbox?

Flexbox (Flexible Box) adalah mode tata letak satu dimensi yang gunanya untuk mengatur jarak dan perataan antar elemen di dalam sebuah kontainer. Bayangkan Flexbox seperti rak otomatis yang bisa bikin barang di dalamnya melebar atau menyempit sendiri sesuai ukuran raknya.

1. Konsep Utama: Parent & Child

Dalam Flexbox, kamu wajib paham dua istilah ini:

  1. Flex Container (Parent): Elemen yang kita kasih perintah display: flex;.

  2. Flex Items (Children): Semua elemen yang ada langsung di dalam Container tersebut.

    Properti untuk si Parent (Container)

    Ini adalah perintah yang kamu pasang di pembungkus luarnya. Ini adalah contoh CSS yang bisa kamu coba:

    .container {
    display: flex; /* Mengaktifkan mode flex */
    flex-direction: row; /* Arah elemen: ke samping (row) atau ke bawah (column) */
    justify-content: center; /* Meratakan elemen secara horizontal */
    align-items: center; /* Meratakan elemen secara vertikal */
    flex-wrap: wrap; /* Biar elemen turun ke bawah kalau nggak muat */
}

    Penjelasan Jurus justify-content:

    • flex-start: Elemen mepet ke kiri.

    • flex-end: Elemen mepet ke kanan.

    • center: Elemen kumpul di tengah.

    • space-between: Jarak rata di antara elemen (ujung ketemu ujung).

    • space-around: Jarak rata tapi ada sela di ujung-ujungnya.

      2. Properti untuk si Child (Flex Items)

      Ternyata kita juga bisa ngatur kelakuan masing-masing "anak" elemennya. Ini yang bikin Flexbox sangat kuat.

      .item {
    flex-grow: 1; /* Elemen bakal rakus, ngambil sisa ruang yang ada */
    flex-shrink: 0; /* Elemen nggak mau mengecil meskipun layar disempitkan */
    flex-basis: 200px; /* Ukuran dasar elemen sebelum sisa ruang dibagikan */
}

      3. Studi Kasus: Membuat Navbar Simpel

      Mari kita gabungkan semuanya. Ini adalah cara paling umum pakai Flexbox. Masukkan kode HTML dan CSS ini di editor blog kamu:

      HTML:

      <nav class="navbar">
    <div class="logo">MyBlog</div>
    <ul class="nav-links">
        <li>Home</li>
        <li>Tutorial</li>
        <li>Contact</li>
    </ul>
</nav>

      CSS : 

      .navbar {
    display: flex;
    justify-content: space-between; /* Logo di kiri, menu di kanan */
    align-items: center;
    padding: 1rem 2rem;
    background: #333;
    color: white;
}

.nav-links {
    display: flex; /* Ul juga jadi flex container buat li-nya */
    list-style: none;
    gap: 20px; /* Kasih jarak antar menu tanpa margin-right manual */
}


      Preview Kode:

      Kenapa Kamu Harus Pakai Flexbox?

      1. Responsif Jadi Gampang: Tinggal ganti flex-direction: row jadi column di layar HP, beres!

      2. Rata Tengah Tanpa Doa: Dulu rata tengah vertikal itu mitos, sekarang cuma butuh align-items: center.

      3. Order: Kamu bisa mindahin posisi elemen tanpa ngubah urutan HTML pakai properti order.