Flexbox

У 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;

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>

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[1]

1. CSS Flexbox (Flexible Box). www.w3schools.com (амер.). Процитовано 7 листопада 2018.