Rritja Zero e Elementeve Flex në CSS

Nëse flex-grow është zero për një element, atëherë ai element nuk do të marrë pjesë në shpërndarjen e hapësirës së lirë. Si parazgjedhje, flex-grow ka vlerën zero dhe prandaj elementët pa flex-grow të caktuar nuk e ndajnë hapësirën e lirë mes vete.

Le të bëjmë një llogaritje si shembull. Le të themi se kemi tre elementë flex, secili me gjerësi 100px. Le të themi se elementi i parë nuk ka flex-grow (ose është 0), elementi i dytë ka flex-grow të barabartë me 2, dhe i treti - 3.

Le të themi se gjerësia e prindit është 500px. Atëherë hapësira e lirë do të jetë 200px, dhe për një njësi flex-grow do të ketë 200px / 5 = 40px. Do të rezultojë se gjerësia e elementit të parë do të mbetet 100px, pasi ai nuk merr pjesë në shpërndarje, gjerësia e të dytit do të jetë 100px + 2 * 40px = 180px, dhe gjerësia e të tretit - 100px + 3 * 40px = 220px.

Detyra praktike

Në të gjitha detyrat e mëposhtme, do t'ju paraqitet disa kod me elementë flex që kanë gjerësi dhe flex-grow. Bazuar në kodin e paraqitur, llogaritni çfarë përmasash do të ketë secili element. Pastaj ekzekutoni kodin dhe kontrolloni llogaritjet tuaja, duke matur gjerësitë reale të elementeve.

Задание 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;
}