CSS-тегі Flex элементтері

Біз зерттеген блоктық модельдер типтерінен басқа тағы бір модель бар - flex элементтері. Ол үшін осы элементтердің ата-анасына display сипаттамасын flex мәнінде жазу керек. Ата-ананың өзі блоктық элемент ретінде қалады, ал оның ұрпақтары flex элементтеріне айналады.

Flex элементтері, блоктық элементтер сияқты ені мен биіктігіне ие болуы мүмкін, margin және padding. Алайда, блоктық элементтерден айырмашылығы, әдепкі бойынша flex элементтері ата-анасының ішінде қатарға тұрады.

Келіңіздер, тырысып көрейік:

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

.parent {
	display: flex; /* ұрпақтар flex элементтері болады */
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}