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

Висота батька

Якщо батькові флекс елементів не задана висота, то по висоті він розтягуватиметься своїм вмістом, тобто висотою нащадків:

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

.parent {
	display: flex;
	width: 300px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

Ширина батька

Якщо батькові флекс елементів не задана ширина, то по ширині він займе все доступне місце:

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

.parent	{
	display: flex;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

Рядково-блоковий батько

Замість значення flex для властивості display батькові можна поставити значення inline-flex. У цьому випадку цей батько поводитиметься, як рядково-блоковий елемент.

Наприклад, якщо не задати ширину батька, то його ширина сформується шириною нащадків:

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

.parent	{
	display: inline-flex;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

Відступи padding батька

Батькові можна задати відступи padding:

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

.parent	{
	display: inline-flex;
	padding: 10px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

Відступи margin нащадкам

Флекс елементам можна задати відступи margin:

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

.parent	{
	display: inline-flex;
	border: 1px solid red;
}
.child {
	margin: 10px;
	width: 50px;
	height: 50px;
	border: 1px solid green;
}