ფლექს ელემენტების ნულოვანი ავარცხნილობა CSS-ში

თუ flex-grow ნულის ტოლია რომელიმე ელემენტისთვის, მაშინ ეს ელემენტი არ მიიღებს მონაწილეობას თავისუფალი სივრცის განაწილებაში. სტანდარტულად, ავარცხნილობას ნულოვანი მნიშვნელობა აქვს და ამიტომ ელემენტებს, რომლებსაც არ აქვთ მინიჭებული flex-grow, არ ყოფენ თავისუფალ სივრცეს ერთმანეთს შორის.

მაგალითისთვის, მოდით, განვახორციელოთ რაიმე გამოთვლა. დავუშვათ, გვაქვს სამი ფლექს-ელემენტი, თითოეული 100px სიგანით. დავუშვათ, პირველ ელემენტს არ აქვს flex-grow (ან ის ნულის ტოლია 0), მეორე ელემენტს აქვს flex-grow, რომელიც ტოლია 2, ხოლო მესამეს - ტოლია 3.

დავუშვათ, მშობელის სიგანე ტოლია 500px. მაშინ თავისუფალი სივრცე იქნება 200px, ხოლო flex-grow-ის ერთ ერთეულზე მოხვდება 200px / 5 = 40px. გამოვა, რომ სიგანე პირველი ელემენტის ისევ 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;
}