Робота з flexbox

CSS3 flex-бокс, або flexbox, це режим розмітки створений для упорядкування елементів на сторінці таким чином, щоб вони поводилися передбачувано у випадках, коли розмітка сторінки адаптована під різні розміри екрану і різні девайси.  В багатьох випадках flexible box є вдосконаленням блокової моделі розмітки, яка не використовує обтікання (floats) і не виконує схлопування відступів flex контейнера і  його контенту (margins collapse).

Flex-контейнер

Батьківський елемент, у якому містяться flex-айтеми. Flex-контейнер визначається flex або inline-flex значеннями display властивості.

Flex-айтем

Кожен дочірній елемент flex-контейнеру стає flex-айтемом. Текст, що напряму міститься в flex-контейнері обгортається анонімним flex-айтемом.

Осі

Кожен flexible-бокс шаблон будується по двох осях. Головна вісь (main axis) - вісь, вздовж якої flex-айтеми слідують один за одним. Перехресна вісь (cross axis) вісь, що перпендикулярна до main axis.

Display: Flex

Приклад сторінки:

Є 4 разнокольорових div’а різних розмірів, які знаходяться всередині сірого div’а. У кожного div’а євластивість display: block. Тому кожний квадрат займає всю ширину рядка.

Що  перетворити звичайні div’и у flexbox, потрібно  для блоку контейнеру примінити  властивость  display із значенням flex:

#container {
  display: flex;
}

Flex-direction

У flex-контейнера є дві осі: головна вісь і перпендикулярна їй.

По замовчуванню  всі предмети розташовуються вздовж  головної вісі: зліва направо. Тому вкладені блоки у контейнер  вирівнюються в лінію, коли застосовується властивість  display: flex. 

Напрямок  розкладки блоків керується властивістю flex-direction.

flex-direction дозволяє обертати головну вісь.

Значения властивості flex-direction::

row — рядок (значення по замовчуванню); row-reverse — рядок з елементами в зворотньому порядку; column — колонка; column-reverse — колонка з елементами в зворотньому порядку.

#container {
  display: flex;
  flex-direction: column;
}

Важливо! flex-direction: column не вирівнює квадрати по осі, яка перпендикулярна головній. Головна вісь сама змінює своє розташування і тепер направлена зверху вниз.

Значення властивості flex-direction: row-reverse і column-reverse.

Justify Content

Justify-content відповідає за вирівнювання елементів  по главній осі.

Властивість flex-direction: row.

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

Justify-content може приймати 5 значень:

1. flex-start;
2. flex-end;
3. center;
4. space-between;
5. space-around.

Space-between задає однакову відстань між квадратами, але не  між  контейнером і квадратами. Space-around також задає  однакову відстань між квадратами, але тепер відстань між контейнером  і квадратами  дорівнює половині відстані між квадратами.

Align Items

Якщо  justify-content працює з головною віссю, то align-items працює з віссю, перпендикулярною главній осі.

Отже, якщо  flex-direction: row , то блоки в контейнері відносно перпендикудярної осі при різних значеннях   align-items  будуть  поводити себе таким чином:

1. flex-start;
2. flex-end;
3. center;
4. stretch;
5. baseline.

Щоб  проілюструвати як працюють осі можна побачити, якщо  для контейнера вказати такі властивості: justify-content , align-items ,  flex-direction:

Align Self

Align-self  дозволяє вирівнювати елементи  кожен окремо.

#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
// Only this square will be centered.

Наприклад,  якщо для  двох квадратів застосувати align-self, а для інших align-items: center і flex-direction: row., то результат буде таким:

Flex-Basis

Flex-basis  відповідає  за початковий розмір елементів до того, як вони будуть змінені  іншими властивостями  Flexbox:

Flex-basis впливає на розмір елементів вздовж головної осі.

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

Flex Grow

Якщо задати блокам однакову ширину в 120 рх :

По замовчуванню flex-grow дорівнює 0. Це означає, що квадратам заборонено рости (займати вільне місце  в контейнері).

Якщо  задати flex-grow =1 для кожного блока:

Блоки займуть  вільне місце в контейнері. Значенняflex-grow анулює значення ширини.

Это значит, что не важно, какое значение у flex-grow, важно, какое оно по отношению к другим квадратам:

Вначале flex-grow каждого квадрата равен 1, в сумме получится 6. Значит, наш контейнер поделен на 6 частей. Каждый квадрат будет занимать 1/6 часть доступного пространства а контейнере.

Когда flex-grow третьего квадрата становится равным 2, контейнер делится на 7 частей (1 + 1 + 2 + 1 + 1 + 1).

Теперь третий квадрат занимает 2/7 пространства, остальные — по 1/7.

И так далее.

Стоит помнить, что flex-grow работает только для главной оси (пока мы не поменяем ее направление).

Flex Shrink

Flex-shrink —   визначає на скільки блоку можна зменшитись в розмірі.

Flex-shrink  використовується, коли елементи  не поміщаються  в контейнер.

По замовчуванню значення flex-shrink для кожного квадрата дорівнює 1. Це означає, що квадрати будуть стискатися, коли контейнер буде зменшуватись.

Якщо  flex-grow і flex-shrink =1:

Якщо встановити, наприклад,  для властивості  flex-shrink   значення для третього блока=0, то цей блок стискатись не буде і  його ширина залишиться 120px:

Приклад для вивчення CSS - властивостей flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flaxbox</title>
<style>
ul {
  display: flex; 
  margin: 0;
  padding: 0;
  background: #ea8c8c;
  list-style: none;
  flex-wrap: wrap;
  height: 500px;
 }
li {
  margin: 5px; 
  background: #c3e2d2;
  border-radius: 3px;
}
ul li:last-of-type {
  }
</style>
</head>
<body>
<div class="container-thingy">
  <ul>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/pear.svg" alt="Pear graphic" /></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/grapes_copy.svg" alt="Grapes graphic" /></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/orange.svg" alt="Orange graphic" /></li>  
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/pear.svg" alt="Pear graphic" /></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/grapes_copy.svg" alt="Grapes graphic" /></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/orange.svg" alt="Orange graphic" /></li> 
  </ul>
</div>
</body>
</html>

Ігровий майданчик з Flexbox

Гра для вивченя Flexbox-властивостей

 

Flexbox