თვისება flex-basis

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

გამოიყენება კონკრეტულ flex ბლოკზე.

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

სინტაქსი

სელექტორი {
	flex-basis: ნებისმიერი CSS ერთეული (და პროცენტები) | auto;
}

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

მაგალითი

დავუშვათ, მთავარი ღერძი ჰორიზონტალურია, ხოლო 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;
}

იხილეთ აგრეთვე

თვისება flex-direction,
რომელიც ადგენს flex ბლოკების ღერძების მიმართულებას
თვისება justify-content,
რომელიც ადგენს სწორებას მთავარი ღერძის გასწვრივ
თვისება align-items,
რომელიც ადგენს სწორებას განივი ღერძის გასწვრივ
თვისება flex-wrap,
რომელიც ადგენს flex ბლოკების მრავალსტრიქონიანობას
თვისება flex-flow,
შემოკლება flex-direction-ისა და flex-wrap-ისთვის
თვისება order,
რომელიც ადგენს flex ბლოკების თანმიმდევრობას
თვისება align-self,
რომელიც ადგენს ერთი ბლოკის სწორებას
თვისება flex-grow,
რომელიც ადგენს flex ბლოკების "მოხარხულობას"
თვისება flex-shrink,
რომელიც ადგენს flex ბლოკების შეკუმშვადობას
თვისება flex,
შემოკლება flex-grow-ის, flex-shrink-ის და flex-basis-ისთვის