Keserakahan Sifar Elemen Fleksibel dalam CSS

Jika flex-grow sama dengan sifar untuk mana-mana elemen, maka elemen tersebut tidak akan mengambil bahagian dalam pengagihan ruang kosong. Secara lalai, keserakahan memang mempunyai nilai sifar dan oleh itu elemen tanpa flex-grow yang ditetapkan tidak berkongsi ruang kosong antara satu sama lain.

Mari kita buat pengiraan sebagai contoh. Katakan kita mempunyai tiga elemen fleksibel, setiap satu dengan lebar 100px. Katakan elemen pertama tidak mempunyai flex-grow (atau nilainya sama dengan 0), elemen kedua mempunyai flex-grow, bersamaan 2, dan elemen ketiga - bersamaan 3.

Katakan lebar elemen induk ialah 500px. Maka ruang kosong akan bersamaan 200px, dan untuk satu unit flex-grow akan diperoleh 200px / 5 = 40px. Hasilnya, lebar elemen pertama akan kekal 100px, kerana ia tidak mengambil bahagian dalam pengagihan, lebar elemen kedua akan menjadi 100px + 2 * 40px = 180px, dan lebar elemen ketiga - 100px + 3 * 40px = 220px.

Tugas Praktikal

Dalam semua tugas di bawah, anda akan dibentangkan dengan beberapa kod dengan elemen fleksibel yang mempunyai lebar dan flex-grow. Berdasarkan kod yang dibentangkan, kira saiz yang akan dimiliki oleh setiap elemen. Kemudian jalankan kod dan semak pengiraan anda, dengan mengukur lebar sebenar elemen.

Задание 1

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
</div>

css.parent {
  display: flex;
  width: 500px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 0;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}
.elem3 {
  width: 100px;
  flex-grow: 1;
}

Задание 2

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
</div>

css.parent {
  display: flex;
  width: 900px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 300px;
  flex-grow: 0;
}
.elem2 {
  width: 200px;
  flex-grow: 3;
}
.elem3 {
  width: 100px;
  flex-grow: 2;
}

Задание 3

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
  <div class="child elem4">4</div>
</div>

css.parent {
  display: flex;
  width: 700px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 0;
}
.elem2 {
  width: 200px;
  flex-grow: 0;
}
.elem3 {
  width: 100px;
  flex-grow: 1;
}
.elem4 {
  width: 100px;
  flex-grow: 1;
}