ფლექს ელემენტების გადატვირთვა CSS-ში

დავუშვათ, რომ ჩვენ გვაქვს ორი ფლექს-ბლოკი, განლაგებული ზედიზედ. ამ ბლოკებს აქვთ სიგანე 100px, ხოლო მათ მშობელს - 300px:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

როგორც ხედავთ, ჩვენი ელემენტების საერთო სიგანე მშობელის სიგანეზე ნაკლებია, ამიტომ მარჯვნივ რჩება თავისუფალი სივრცე.

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

პრაქტიკაში ვნახოთ, როგორ მუშაობს ეს თვისება.

მაგალითი

ამჟამად ჩვენ გვაქვს ორი ფლექს-ბლოკი სიგანით 100px. მათი ელემენტების საერთო სიგანე 200px, ხოლო მშობელის სიგანე - 300px. გამოდის, რომ რჩება თავისუფალი სივრცე 100px.

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

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

პირველ რიგში, საჭიროა მივიღოთ ყველა ჩვენი ელემენტის flex-grow ერთეულების საერთო რაოდენობა. პირველ ელემენტს აქვს ის 1-ის ტოლი, ხოლო მეორეს - 3. ეს ნიშნავს, რომ ჯამში ის 4-ის ტოლია.

ახლა გავყოთ 100px თავისუფალი სივრცე 4-ზე და მივიღებთ, რომ 25px მოდის flex-grow-ის ერთ ერთეულზე. გამოვა, რომ პირველ ელემენტს დაემატება flex-grow-ის ერთი ერთეული, ანუ 25px, ხოლო მეორეს - სამი ერთეული, ანუ 75px.

პირველი ელემენტის სიგანე იქნება 125px, ხოლო მეორის - 175px:

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

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

Результат:

მაგალითი

დავუშვათ, რომ ახლა მშობელის სიგანე 400px-ის ტოლია, პირველი ელემენტის სიგანე 200px, ხოლო მეორე ელემენტის სიგანე - 100px. გამოვა, რომ თავისუფალი სივრცე ისევ 100px-ის ტოლია.

მოდით, თითოეულ ელემენტს მივანიჭოთ flex-grow, 1-ის ტოლი. ჯამში გამოვა 2, ანუ 100px თავისუფალი სივრცე უნდა გაიყოს 2-ზე. გამოვა, რომ 50px მოდის გადატვირთვის ერთ ერთეულზე.

რადგან ყველა ელემენტს აქვს flex-grow-ის იგივე მნიშვნელობა, მაშინ ყველა ელემენტს დაემატება 50px-ის ტოლი მნიშვნელობა. ეს ნიშნავს, რომ პირველი ელემენტი გახდება 250px, და მეორე გახდება 150px:

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

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

Результат:

მაგალითი

დავუშვათ, რომ ისევ მშობელის სიგანე 400px-ის ტოლია, პირველი ელემენტის სიგანე 200px, ხოლო მეორე ელემენტის სიგანე - 100px.

ახლა პირველ ელემენტს დავუყენოთ flex-grow მნიშვნელობა 3, ხოლო მეორეს - მნიშვნელობა 1. გამოვა, რომ გადატვირთვა ჯამში 4-ის ტოლია. მაშინ გადატვირთვის ერთი ერთეული 100px / 4 = 25px-ის ტოლია.

პირველ ელემენტს დაემატება 75px, და ის გახდება 275px, ხოლო მეორეს - 25px, ის გახდება 125px:

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

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

Результат:

პრაქტიკული ამოცანები

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

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: 3;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}
.elem3 {
  width: 100px;
  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: 700px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 2;
}
.elem3 {
  width: 200px;
  flex-grow: 3;
}

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: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}
.elem3 {
  width: 100px;
  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 class="child elem4">4</div>
</div>

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