flex-grow | Codingku

Properti CSS flex-grow merupakan sub-properti dari modul layout kotak Flexbox.

Properti ini mendefinisikan kemampuan item flex untuk mengembang jika diperlukan.

Properti flex-grow menerima value tanpa unit satuan (nilai tanpa px, rem, atau em) yang berfungsi sebagai pembentuk proporsi lebar item flex.

Nilai ini menentukan jumlah ruang yang tersedia di dalam wadah fleksibel yang harus diambil item flex.

Misalnya, jika semua item memiliki flex-grow diatur ke 1, setiap elemen anak akan disetel ke ukuran yang sama di dalam wadah.

Jika kamu memberi salah satu elemen anak tersebut dengan nilai 2, maka elemen anak itu akan memakan ruang dua kali lebih banyak daripada yang lain.

CSS Syntax

flex-grow: number | initial | inherit;

Javascript Syntax

object.style.flexGrow="5"

Attribute Value

default flex-grow: 0;

Elemen tidak akan mengembang meskipun ada ruang yang tersedia. Itu hanya akan menggunakan ruang yang dibutuhkan.

flex-grow: 1;

Elemen akan tumbuh dengan faktor 1. Item ini akan mengisi ruang yang tersisa jika tidak ada item flexbox lain yang memiliki nilai flex-grow.

flex-grow: 2;

Karena nilai flex-grow relatif, perilakunya tergantung pada nilai saudara item flexbox.

Dalam contoh ini, sisa ruang dibagi menjadi 3:

Sepertiga ke item ungu
2/3 ke item indigo
Tidak ada yang masuk ke item biru, yang mempertahankan lebar awalnya

Contoh:

HTML CSS Preview

<div class="flex__wrap" id="container">
  <div class="flex__item" id="one">1</div>
  <div class="flex__item" id="two">2</div>
  <div class="flex__item" id="three">3</div>
  <div class="flex__item" id="four">4</div>
</div>
<div class="flex__controls">
  <table>
    <tr>
      <td>Item 1:</td>
      <td><input type="text" value="0"
          onkeyup="var item=document.getElementById('one'); item.style.WebkitFlexGrow = this.value; item.style.flexGrow = this.value;">
      </td>
    </tr>
    <tr>
      <td>Item 2:</td>
      <td><input type="text" value="0"
          onkeyup="var item=document.getElementById('two'); item.style.WebkitFlexGrow = this.value; item.style.flexGrow = this.value;">
      </td>
    </tr>
    <tr>
      <td>Item 3:</td>
      <td><input type="text" value="0"
          onkeyup="var item=document.getElementById('three'); item.style.WebkitFlexGrow = this.value; item.style.flexGrow = this.value;">
      </td>
    </tr>
    <tr>
      <td>Item 4:</td>
      <td><input type="text" value="0"
          onkeyup="var item=document.getElementById('four'); item.style.WebkitFlexGrow = this.value; item.style.flexGrow = this.value;">
      </td>
    </tr>
  </table>
</div>

.flex__wrap {
  margin: 150px auto;
  max-width: 800px;
  padding: 20px;
  display: flex;
  background-color: #594255;
  position: relative;
}

.flex__item {
  background-color: #fff;
  width: 100px;
  height: 100px;
  margin: 1%;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 5em;
  color: #594255;
}

.flex__controls {
  background-color: white;
  width: 150px;
  padding: 20px;
  line-height: 150%;
  position: absolute;
  top: -160px;
  right: 0;
  border: 1px solid #ddd;
}

.flex__controls input {
  width: 50px;
  padding-left: 10px;
  border: 1px solid #ddd;
}

.flex__controls input:focus {
  outline: none;
}