CSS да флекс элементларининг нол гардишлиги

Агар flex-grow қандайдир элемент учун нолга тенг бўлса, у ҳолда ушбу элемент бўш жойни таксимлашишда иштирок этмайди. Стандарт бўйича гардишлик айнан нол қийматга эга ва шу сабабдан flex-grow берилмаган элементлар бўш жойни ўзаро бўлиша олмайдилар.

Мисол учун бирор ҳисоб-китоб қилайлик. Фараз қилайлик, бизда учта флекс-элемент бор, ҳар бирининг эни 100px. Биринчи элементда flex-grow бўлмасин (ёки у 0 га тенг), иккинчи элементнинг flex-grow 2 га, учинчисиники эса 3 га тенг бўлсин.

Фараз қилайлик, ота-онанинг эни 500px га тенг. У ҳолда бўш жой 200px га тенг бўлади, ва flex-grow бирлигига 200px / 5 = 40px тушadi. Натижада биринчи элементнинг эни 100px да қолади, чунки у таксимлашда иштирок этмайди, иккинчининг эни 100px + 2 * 40px = 180px, учинчининг эни эса 100px + 3 * 40px = 220px бўлади.

Амалий машқлар

Қуйидаги барча машқларда сизга эн ва flex-grow га эга бўлган флекс-элементлар билан бир қанча код кўрсатилади. Кўрсатилган код асосида ҳисобланг, ҳар бир элемент қандай ўлчамларга эга бўлади. Сўнгра кодни ишга туширинг ва ҳақиқий энларни ўлчаб, сизнинг ҳисоб-китобларингизни текширинг.

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