#12 flex items

CSS. Урок 12 Адаптивна верстка сторінки flex box (2 частина)

Налаштування дочірних блоків (items).

Дочірні елементи, що знаходяться всередині flex контейнера можна налаштувати спеціальними властивостями. Розглянемо лише деяки щоб мати уяву про цю технологію

flex-grow
flex-shrink
flex-basis

1. flex-grow:додатнє число;

якщо число > 0 це означає, що блок розтягується і займає свою частину серед інших блоків. Число визначає: скільки найменщих частин займатиме цей блок.

Блок стає таким же гумовим як і контейнер батько. Число = 0 відміняє цю властивість.

2. flex-shrink:додатнє число;

Число цієї властивості вказує на коефіцієнт стискання (на скільки даний блок буде стискатися в порівнянні з іншими при відсутності вільного місця). Як правило використовують значення 1. Значення 0 вказує на те, що стискання не відбувається.

3. flex-basis:розмір;

Вказує на те, що даний елемент при розтягування буде не більше базового розміру.

Всі три властивості можна описати в одній властивості flex.

Властивість flex

Наведемо деяки приклади:

flex:0 0 100px;: Фіксований розмір дочірнього блоку. Зміна розміру вікна на розмір блока не впливає.
flex:1 1 100px;: Параметр 100px не має значення, так як блок розтягується і заповнює 1 частину від довжини всього контейнера.
flex:0 1 100px: При зміні розміру контейнера даний блок не може бути більше 100px

Скорочена властивість flex число

Якщо властивості flex вказати лише одне число, наприклад flex:1, то це означає за замовченням flex:1 1 auto;

Перегляньте наступний приклад змінюючи горизонтальний розмір вікна.

file css

.container
{
display:flex;
background-color:lightblue;
}
.block1, .block2
{
background-color:blue;
color:white;
padding:20px;
font-size:22pt;
}
.block1 {
flex:1;
}
.block2 {
flex:2;
}

file html

<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<h2>Довжина кожного блока в контейнері 1/4 довжини всього контейнера</h2>
<div class = container>
   <div class = block1> 1 </div>
     <div class = block1> 1 </div>
     <div class = block1> 1 </div>
     <div class = block1> 1 </div>
</div>

<h2>Середній блок займає 2/4 = 1/2 довжини всього контейнера</h2>
<div class = container>
   <div class = block1> 1 </div>
     <div class = block2> 2 </div>
     <div class = block1> 1 </div>
</div>
</body>
</html>

Виконайте вправу в редакторі html

Створити контейнер flex та помістити в нього 2 розфарбованих по різному блоки. Блоки мають розподілити простір контейнера як у зразку.