FLEX-GROW

Flex-grow adalah properti CSS yang memungkinkan kamu untuk mengontrol sejauh mana item dalam container flex tumbuh untuk mengisi ruang yang tersedia. Properti ini mendapatkan nilai sebagai angka, dan ini menentukan rasio dari ruang yang tersedia yang akan diisi oleh item tersebut.

Penggunaan Flex-grow

Untuk menggunakan properti flex-grow, kamu cukup mengaplikasikan pada item yang ingin kamu modifikasi pertumbuhannya. Nilai defaultnya adalah 0, yang berarti item tidak akan tumbuh untuk mengisi ruang yang tersedia.

    .item {
        flex-grow: 1;
    }

Dalam contoh ini, .item akan tumbuh untuk mengisi semua ruang yang tersedia dalam container flex.

Nilai Flex-grow

Nilai untuk flex-grow dapat berupa angka non-negatif. Nilai lebih tinggi berarti item akan mengambil lebih banyak ruang yang tersedia.

    .item1 {
        flex-grow: 2;
    }

    .item2 {
        flex-grow: 1;
    }

Dalam contoh ini, .item1 akan mengambil dua kali lebih banyak ruang yang tersedia dibandingkan dengan .item2.

Perlu Diperhatikan

Ada beberapa hal yang perlu diperhatikan tentang properti flex-grow:

• Jika semua item dalam suatu container memiliki flex-grow yang sama, mereka akan membagi ruang yang tersedia secara merata.

• Jika ada ruang yang tersisa dalam container flex setelah penempatan semua elemen dan tidak ada item yang memiliki nilai flex-grow, maka ruang tersebut akan tetap kosong.

• Properti ini tidak memiliki efek pada item yang dimensinya sudah ditentukan (seperti lebar atau tinggi tetap).