ფლექს ელემენტის ზომა მთავარი ღერძის გასწვრივ

width და height თვისებები განსაზღვრავენ ფლექს ელემენტის სიგანეს და სიმაღლეს ღერძების მიმართულებისგან დამოუკიდებლად. ანუ, თუ ღერძი ჰორიზონტალურია, მაშინ width დააყენებს სიგანეს, მაგრამ თუ ღერძი ვერტიკალურია, width მაინც სიგანეს დააყენებს. ზოგჯერ ასეთი ქმედება არაა მოსახერხებელი.

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

დავუშვათ, მთავარი ღერძი ჰორიზონტალურია, ხოლო flex-basis-ს აქვს მნიშვნელობა 50px. ამ შემთხვევაში ელემენტების სიგანე იქნება 50px:

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

.parent {
	display: flex;
	flex-direction: row; /* ღერძი ჰორიზონტალურია */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* ელემენტის ზომა */
	border: 1px solid green;
}

მოდით ახლა შევაბრუნოთ ღერძი, თვისების flex-basis მნიშვნელობის შეცვლის გარეშე. ამ შემთხვევაში უკვე ელემენტების სიმაღლე იქნება 50px:

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

.parent {
	display: flex;
	flex-direction: column; /* ღერძი ვერტიკალურია */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

შექმენით 5 ფლექს-ბლოკი. მიანიჭეთ მათ სიგანე მთავარი ღერძის გასწვრივ 100px. შეისწავლეთ ბლოკების ქმედება სხვადასხვა ღერძის მიმართ.

თუ ღერძი ჰორიზონტალურია და ბლოკს ენიჭება თვისება flex-basis და ამავე დროს თვისება width, მაშინ flex-basis-ს ექნება პრიორიტეტი. შეამოწმეთ ეს.

თუ ღერძი ვერტიკალურია და ბლოკს ენიჭება თვისება flex-basis და ამავე დროს თვისება height, მაშინ flex-basis-ს ექნება პრიორიტეტი. შეამოწმეთ ეს.