თვისება flex-grow

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

მაგალითად, თუ ყველა flex-ბლოკი flex-კონტეინერის შიგნით აქვს flex-grow:1, მაშინ ისინი იქნებიან ერთნაირი ზომის. თუ ერთ-ერთ მათგანს აქვს flex-grow:2, მაშინ ის იქნება 2-ჯერ დიდი, ვიდრე ყველა დანარჩენი.

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

ეხება: კონკრეტულ flex ბლოკს.

ეს თვისება შედის შემადგენელ ნაწილად შემოკლებულ თვისებაში flex.

სინტაქსი

სელექტორი {
	flex-grow: დადებითი რიცხვი;
}

ნაგულისხმევი მნიშვნელობა: 0.

მაგალითი

ახლა ჩვენ გვაქვს ორი ფლექს-ბლოკი სიგანით 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:

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

.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:

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

.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:

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

.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-direction,
რომელიც ადგენს flex ბლოკების ღერძების მიმართულებას
თვისება justify-content,
რომელიც ადგენს გასწორებას მთავარი ღერძის მიმართ
თვისება align-items,
რომელიც ადგენს გასწორებას განივი ღერძის მიმართ
თვისება flex-wrap,
რომელიც ადგენს flex ბლოკების მრავალსტრიქონიანობას
თვისება flex-flow,
შემოკლება flex-direction-ისთვის და flex-wrap-ისთვის
თვისება order,
რომელიც ადგენს flex ბლოკების თანმიმდევრობას
თვისება align-self,
რომელიც ადგენს ერთი ბლოკის გასწორებას
თვისება flex-basis,
რომელიც ადგენს კონკრეტული flex ბლოკის ზომას
თვისება flex-shrink,
რომელიც ადგენს flex ბლოკების შეკუმშვადობას
თვისება flex,
შემოკლება flex-grow-ის, flex-shrink-ის და flex-basis-ისთვის