flex-grow

Pelajaran 14 dari 15 dalam kursus CSS Flexbox: Kursus Lengkap di Coddy.

Property flex-grow menentukan kemampuan item flex untuk bertambah besar jika diperlukan.

Property ini menerima angka yang berfungsi sebagai proporsi.

Jika flex-grow semua item diatur ke 1, sisa ruang dalam container akan dibagikan secara merata kepada semua anak. Jika salah satu anak memiliki nilai 2, anak tersebut akan menggunakan ruang dua kali lebih banyak daripada masing-masing anak lainnya.

Contoh:

.item {
  flex-grow: 4;
}

Nilai default-nya adalah 0, angka negatif tidak valid.

Tantangan

Mudah

Kamu diberi flexbox dengan tiga item flex. Buat item flex di tengah tumbuh dua kali lebih besar daripada item di kedua sisinya.

Kamu harus memberikan property flex-grow kepada semua item.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
</html>

Semua pelajaran di CSS Flexbox: Kursus Lengkap

1Pengenalan

Pengenalan Wadah dan Item

2Kontainer Flex

Flexbox flex-direction flex-wrap flex-flow justify-content align-items align-content gap Tepat di Tengah

3Item Flex

Elemen Anak orderflex-growalign-self

Latihan sendiri: Playground Web