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