Флекс елементи в 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;
}