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;
}