Метод позиціонування елементів Flexbox

Специфікація Flexbox (Flexible Box Layout Module)– це метод позиціонування елементів у горизонтальному чи вертикальному напрямках.

Flexbox поєднує в собі набір властивостей для батьківського flex-контейнера та дочірніх flex-елементів.

Щоб елемент став flex-контейнером, йому треба присвоїтиdisplay: flex;абоdisplay: inline-flex;(блоковий або малий відповідно).

Усередині flex-контейнера створюються дві осі: головна та перпендикулярна їй поперечна. Спочатку flex-елементи вишиковуються по головній осі, а потім вже по поперечній.

Властивості flex-контейнера

Ця властивість не працює для однорядкового flex-контейнера.

Властивості flex-елементів

У специфікації CSS Flexible Box Layout Module Level 1 наведено наочну діаграму для трьох flex-елементів зі значеннями flex-grow 1, 1, 2 відповідно:

метод

Особливості застосування Flexbox на практиці

1. Вирівнювання з правого краю

Для наочності блокам додано пунктирні межі.

2. Стиснення блоків з довгими словами

Тепер у описі послуги з'являється довге слово.

Справа в тому, що мінімальна ширина (min-width) блоку description за умовчанням має значення auto, що в даному випадку дорівнює ширині слова "пінополістиролбетонних". Значить, flex-елемент не може бути вже ніж це слово.

Вирішення цієї проблеми – вказати для flex-елемента нульову мінімальну ширину (min-width: 0). Тепер елемент може бути вже, ніж його вміст. А довге слово можна перенести.

3. Гарантована ширина

Кнопка "Залишити заявку" по ширині зовсім не 120px, як було зазначено у стилях. Справа в тому, що за умовчанням flex-елемент стискається, якщо місця недостатньо.

Наступні трикомбінації розробники Flexbox вважали найчастіше використовуваними і надали їм ключові слова:

Отже, щоб ширина кнопки "Залишити заявку" дорівнювала саме 120px, треба додати flex: none.

4. Кілька корисних зауважень

Треба не забувати, що:

  • вертикальне вирівнювання (vertical-align) не впливає на flex-елемент,
  • для flex-елементів слід повністю уникати використання margin або padding у %,
  • відступи (margin) сусідніх flex-елементів ніколи не поєднуються,
  • z-index на flex-елементі працює навіть при position: static,
  • Для вертикального вирівнювання flex-елементів з різним розміром шрифту краще встановити align-items: baseline.

5. Як висновок.

Підтримка Flexbox сучасними браузерами досить хороша, за винятком IE11:(