Belajar CSS: Mengenal CSS Flexible Box

Kita akan perlu untuk mengatur layout dalam Web dengan fleksibel. Kita bisa menggunakan CSS Flex Box untuk mengatur layout yang lebih kompleks daripada menggunakan CSS Flex.

Apa itu CSS Flexible Box?

CSS Flexible Box atau flex box adalah mode layout pada CSS yang memungkinkan kita mengatur panjang, lebar, dan posisi item di dalam container.

Konsep Dasar CSS Flex Box

Pada flex box terdapat container dan item. Hubungan antara keduanya adalah container merupakan parent dari item dan item merupkan child dari container.

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Dalam flex box terdapat dua sumbu/axis yaitu:

• Main Axis, sumbu yang digunakan untuk menyusun item
• Cross Axis, sumbu yang tegak lurus dengan Main Axis

Properti Dispay pada Container

Properti display pada container harus flex atau inline-flex.

.container {
    display: flex | inline-flex;
}

Mengatur Main Axis

Untuk mengatur Main Axis kita bisa menggunakan properti flex-direction pada container. Ada beberapa nilai yang bisa kita masukkan, yaitu:

• row (default), Main Axis merupakan garis horizontal
• row-revere, Main Axis merupakan garis horizontal tapi dari kanan
• column, Main Axis menjadi garis vertical
• column-reverse, Main Axis menjadi garis vertical tapi dari bawah

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

Mengatur Baris pada Container

flex-wrap menentukan apakah container dapat mempunyai beberapa baris atau tidak. Dapat diisi dengan:

• nowrap (default), container hanya dapat mempunyai satu baris
• wrap, container dapat mempunyai beberapa baris jika dibutuhkan
• wrap-reverse, container dapat mempunyai beberapa baris tapi baris akan terbalik

.container {
    flex-wrap: nowrap | wrap | wrap-reverse
}

Mengatur Tata Letak Item

Ada beberapa properti yang bisa kita gunakan untuk mengatur tata letak item yaitu:

justify-content pada Container

Mengatur bagaimana pembagian ruang untuk item terhadap Main Axis. Dapat diisi dengan:

• flex-start (default) item akan ditempatkan pada awal Main Axis
• flex-end, item akan ditempatkan pada ujung/akhir Main Axis
• center, item akan ditempatkan pada bagian tengah Main Axis
• space-between, item akan disebarkan secara merata dengan item pertama pada awal Main Axis dan terakhir pada ujung Main Axis
• space-around, item akan disebarkan secara merata dengan jarak yang sama di sekitar item.
• space-evenly, item akan disebarkan secara merata. Jadi jarak antara dua item sama.

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

align-items pada Container

Mengatur posisi setiap item terhadap Cross Axis. Dapat diisi dengan:

• flex-start (default), setap item ditempatkan pada awal Cross Axis
• flex-end, setap item ditempatkan pada ujung Cross Axis
• center, setiap item akan ditemparkan di tengah-tengah Cross Axis
• stretch, setiap item akan direngagkan sampai memenuhi Cross Axis
• baseline, setiap item akan disejajarkan berdasarkan baseline tiap *item

.container {
    align-content: flex-start | flex-end | center | stretch | baseline;
}

align-content pada Container

Mengatur bagaimana pembagian ruang untuk setiap baris terhadap Cross Axis. Properti ini hanya dapat bekerja jika memiliki lebih dari satu baris. Cara kerja align-content mirip dengan justify-content. Dapat diisi dengan:

• flex-start (default), item akan ditempatkan pada awal Cross Axis
• flex-end, item akan ditempatkan pada ujung/akhir Cross Axis
• center, item akan ditempatkan pada bagian tengah Cross Axis
• stretch, item akan direngangkan sampai memenuhi Cross Axis
• space-between, item akan disebarkan secara merata dengan item pertama pada awal Cross Axis dan terakhir pada ujung Cross Axis
• space-around, item akan disebarkan secara merata dengan jarak yang sama di sekitar item.

.container {
    align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}

align-self pada item

Mengatur posisi item terhadap Cross Axis. Properti ini akan mengesampingkan nilai dari align-items pada container. Properti ini sebenarnya sama dengan align-item yang membedakanya align-items untuk seluruh item pada container sedangkan align-self untuk item terkait saja.

.item {
    align-self: flex-start | flex-end | center | stretch | baseline
}

order pada item

Properti order menentukan urutan item muncul container. Secara, default item akan muncul sesuai urutan pada HTML.

flex-grow pada item

Properti flex-grow menentukan kemampuan item untuk merentang jika bisa. Diisi dengan angka yang menunjukkan proporsi item terhadap item lain. Nilai default adalah 0. Jika bernilai 0, maka item tidak akan merentang. Jika pada container, semua item mempunyai flex-grow 1, maka panjang semua item akan sama.

Lainya

Masih ada beberapa properti yang bisa kita gunakan untuk mengatur tata letak pada CSS Flex Box. Kalian Bisa melihat di CSS Tricks tentang CSS Flex Box.

Membuat Layout Sederhana dengan CSS Flex Box

Kali ini kita akan membuat layout sebuah Blog menggunakan CSS Flex Box. Codenya seperti ini:

<style>
    body {
        margin: 0;
    }

    .container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 100vh;
    }

    .header {
        height: 60px;
        padding: 0 10px;
        display: flex;
        align-items: center;
    }

    .header, .footer, .sidebar{
        background: gray;
        color: white;
    }

    .title {
        flex-grow: 1;
        font-size: 18pt;
    }

    .menu {
        margin: 0 8px;
    }

    .main {
        flex-grow: 1;
        display: flex;
    }

    .content, .sidebar {
        padding: 10px;
    }

    .content {
        flex-grow: 4;
    }

    .sidebar {
        flex-grow: 1;
        margin: 10px;
    }

    .footer {
        padding: 10px;
    }

</style>

<div class="container">
    <div class="header">
        <span class="title">DaunKoder</span>
        <span class="menu">Tentang</span>
        <span class="menu">Beranda</span>
    </div>

    <div class="main">
        <p class="content">
            Konten sebuah blog
        </p>
        <div class="sidebar">
            Artikel lain
        </div>
    </div>

    <div class="footer">Footer</div>
</div>

Menjadi:

Kesimpulan

Terima kasih telah membaca artikel saya.