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