ფლექს ელემენტები CSS-ში

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

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

მოდით ვცადოთ:

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

.parent {
	display: flex; /* შვილობილი ელემენტები იქნებიან ფლექს ელემენტები */
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}