Flexbox

CSS flexbox — це CSS3 веб модуль. Flex дозволяє автоматично організовувати відповідні елементи в контейнері залежно від розміру екрана (або пристрою) та дає змогу використовувати більш ефективний спосіб верстки, вирівнювання й розподілу вільного місця між елементами у контейнері, навіть коли їх розмір невідомий і/або динамічний.

Однією з найважливіших особливостей flexbox є його здатність формуватися на основі його середовища перегляду. Контейнери Flex можна регулювати за розміром, (як збільшувати, так і зменшувати) щоб уникнути надмірної монополізації простору. Більше того, цей лейаут краще обмежує потік контенту, ніж, наприклад, блокові та вбудовані типи дисплею, які, як правило, односпрямовані. Дійсно, можна не лише задати напрямок потоку флексу на рівні стилю, наприклад вправо, вліво, вгору або вниз; окремі елементи в такому контейнері також можуть бути автоматично перевпорядковані та перебудовані відповідно до наявного макета.

Історія

У 2000-і роки інтенсивний доступ до Інтернету мобільними агентами мотивував «рідкі макети» та чутливі елементи для зростаючої різноманітності розмірів екрана. У 2010-і роки інтенсивне використання JavaScript макетів, таких як Bootstrap, надихнуло специфікацію гнучкого коду CSS та макета сітки. • 2008 — CSS Working Group обговорює пропозицію"Flexible Box Model" на основі XUL (XML User Interface Language –мови розмітки в додатках Mozilla) і XAML (Extensible Application Markup Language – мови розмітки в додатках Microsoft). • 2009 — опубліковано чернетку «Flexible Box Layout Module». Chrome і Safari додає часткову підтримку, поки Mozilla починає підтримувати XUL-подібний синтаксис відомий як «Flexbox 2009». • 2011 — Tab Atkins береться за розвиток Flexbox і публікує 2 чернетки. В цих чернетках синтаксис сильно змінено. Chrome, Opera і IE 10 впроваджують підтримку цього синтаксису. Він відомий під назвою"flexbox 2011" • 2012 — Синтаксис знову дещо змінили та зробили більш точним. Специфікація переходить у статус Candidate Recommendation і відома під назвою"flexbox 2012". Opera впроваджує безпрефіксну, Chrome підтримує поточну специфікацію з префіксами, а Mozilla без них, IE10 додає підтримку синтаксису «flexbox 2011», що почав застарівати. • 2014 — всі нові браузери підтримують останню специфікацію (включно з IE 11)

Термінологія

Далі наведено декілька термінів, пов'язаних з CSS flexbox.

Flex container

Батьківський елемент, що містить всі фрагменти контенту. Використовуючи властивість CSS, контейнер можна визначити як flex або inline-flex.

Flex item

Будь-який дочірній елемент, що зберігається в флекс контейнері, вважається гнучким. Будь-який текст у межах контейнера загортається.

Axes

Кожна гнучка коробка містить дві осі: основну та поперечну. Основна вісь — вісь, на якій елементи вирівнюються відповідно до один з одного. Перехресна вісь перпендикулярна головній осі.

Flex-direction

Встановлює основну вісь. Можливі аргументи left, right, center, space-between, space-around.

Justify-content

Визначає, як вміст розміщується на основній осі на поточній лінії. Додаткові аргументи: вліво, вправо, в центрі, пробіл, простір навколо.

Align-items

Визначає за замовчуванням, як гнучкі елементи розміщуються по поперечній осі на кожній лінії.

Align-content

Визначає за замовчуванням вирівнювання ліній поперечної осі.

Align-self

Визначає, як розташовується один елемент уздовж осей. Це перевизначає будь-які значення за замовчуванням, встановлені командою «Align-items».

Directions

Інструмент визначає, з чого почати розміщення елементів у флекс контейнері, починаючи з "main-start"у та переходячи до "main-end"у. "Cross-start/cross-end інструмент визначає, де флекс лінії наповнюються контентом від "cross-start"у до "cross-end"у.

Order

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

Flex-flow

Поєднує flex-direction і flex-wrap.

Lines

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

Dimensions

«Main size» і «cross size» — це, по суті, висота і ширина флекс контейнера, і стосуються головної та поперечної осей відповідно.

Flex-basis

"Flex-basis" дозволяє визначати початкові ширину та висоту контейнера.

Створення флекс-контейнера

Переведення контейнера в стан «флекс» є досить простим. Все, що необхідно — це змінити властивість дисплею на flex чи inline-flex як показано: display: flex; чи: display: inline-flex;

Після зміни властивості дисплею на одну з вказаних вище, елемент стає флекс-контейнером, а вміст — флекс-контентом. Зміна властивості дисплею на «flex» перетворює контейнер на блоково-рівневий елемент, тоді як зміна на «inline-flex» перетворює контейнер на нелінійно-рівневий елемент.

Align to center

Одною з переваг флексбоксу є можливість легко вирівняти вміст у контейнері відносно центра сторінки як по вертикалі, так і по горизонталі.

display: flex;
align-items: center;
justify-content: center;

Align Specific Child Elements Differently from its Siblings

Використовуючи «margin-left» (лівий зовнішній відступ) та «margin-right» (правий зовнішній відступ), обрані дочірні елементи у флекс-контейнері можуть бути вирівняні по основних осях порівняно з їхніми «двійниками», що вирівняні з використанням інструменту «justify-content».

У поданому нижче прикладі усі дочірні елементи вирівняно відносно початку флекс-контейнера, за винятком останнього елемента, який вирівняно відносно правого краю контейнера, за допомогою використання інструмента «margin-left: auto» (лівий зовнішній відступ.авто):

ul {
  list-style: none;
  padding: 10px;
  margin: 0;
  background: black;
  display: flex;
  justify-content: flex-start;
}

li {
  display: inline;
  background: white;
  text-align: center;
  font-weight: bold;
  font-size: 2em;
  width: 70px;
  height: 70px;
}

# three {
  margin-left: auto; /* right align this child and those that follow in the source */
}

<ul>
  <li id="one">1</li>
  <li id="two">2</li>
  <li id="three">3</li>
</ul>

Даний приклад вирівнює весь контент відповідно до кінця контейнера, за винятком останнього елемента, який зміщено вліво завдяки інструменту «margin-right: auto» (правий зовнішній відступ.авто.):

ul {
  list-style: none;
  padding: 10px;
  margin: 0;
  background: green;
  display: flex;
  justify-content: flex-end;
}

li {
  display: inline;
  background: white;
  text-align: center;
  font-weight: bold;
  font-size: 2em;
  width: 70px;
  margin-right: 2px;
  height: 70px;
}

# one {
  margin-right: auto; /* left align this child and those that proceed it in the source */
}

Посилання

https://www.w3schools.com/css/css3_flexbox.asp [Архівовано 12 жовтня 2017 у Wayback Machine.]