Flexbox

Ця стаття має кілька недоліків. Будь ласка, допоможіть удосконалити її або обговоріть ці проблеми на сторінці обговорення. Ця стаття є сирим перекладом з англійської мови. Можливо, вона створена за допомогою машинного перекладу або перекладачем, який недостатньо володіє обома мовами. Будь ласка, допоможіть поліпшити переклад. (24 жовтня 2018) Цю статтю треба вікіфікувати для відповідності стандартам якості Вікіпедії. Будь ласка, допоможіть додаванням доречних внутрішніх посилань або вдосконаленням розмітки статті. (24 жовтня 2018) Ця стаття не містить посилань на джерела. Ви можете допомогти поліпшити цю статтю, додавши посилання на надійні (авторитетні) джерела. Матеріал без джерел може бути піддано сумніву та вилучено. (24 жовтня 2018)

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» перетворює контейнер на нелінійно-рівневий елемент.

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

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

Використовуючи «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.]^[1]

1. ↑ CSS Flexbox (Flexible Box). www.w3schools.com (амер.). Архів оригіналу за 12 жовтня 2017. Процитовано 7 листопада 2018.