Css flexbox

В этой статье познакомимся с технологией CSS Flexbox, предназначенной для создания гибких макетов веб-страниц.

Поддержка браузерами технологии CSS Flexbox

Технология Flexbox поддерживается уже почти всеми используемые на сегодняшний момент браузерами (с использованием префиксов: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+).

Основы Flexbox (сетка)

В основу Flexbox положена сетка. Она состоит всего из 2 элементов. Первый элемент – это flex-контейнер. Создание flex-контейнера осуществляется посредством добавления к необходимому HTML элементу CSS-свойства display со значением flex

или flex-inline.

После этого все непосредственные дочерние элементы flex-контейнера (дети) автоматически становятся flex-элементами (2 элемент flexbox сетки).

HTML разметка:

  <div class="flex-container">   <div>1</div>   <div>2</div>   <div>3</div>   <div>4</div>  </div>  

CSS-стили:

  .flex-container {   display: flex; /* flex || inline-flex */  }  

Flex-элементы по умолчанию занимают всю высоту flex-контейнера.

Значение flex или flex-inline определяет то, как flex-контейнер будет представлен на странице. Если его необходимо представить как блок, то используйте значение flex. Если элемент необходимо представить как строчный, то используйте значение flex-inline. В этом случае он будет занимать столько места странице, сколько необходимо для отображения его элементов.

Направление выстраивания flex-элементов

Указание направления выстраивания flex-элементов внутри flex-контейнера осуществляется посредством осей.

Во flexbox выделяют 2 оси. Первая ось называется основной или главной (по умолчанию направлена вправо). Вторая — поперечная (по умолчанию направлена вниз).

Элементы во flex-контейнере располагаются в одну линию (по умолчанию) даже тогда, когда им не хватает места. Выстраиваются flex-элементы в flex-контейнере по направлению основной оси.

В CSS Flexbox разрешить перенос flex-элементов на новые линии (если им не хватает места в текущей линии) осуществляется с помощью установки flex-контейнеру CSS свойства flex-wrap

со значением wrap или wrap-reverse.

  flex-wrap: wrap;   /*    nowrap (в одну линию - по умолчанию)    wrap (разрешить перенос flex-элементов на новые линии)    wrap-reverse (осуществлять перенос flex-элементов в обратном порядке)   */  

Значения wrap и wrap-reverse CSS-свойства flex-wrap определяют направление поперечной оси.

Установка направления главной оси flexbox осуществляется с помощью CSS-свойства flex-direction.

  flex-direction: row;   /*    row (вправо) - по умолчанию   row-reverse (налево)   column (вниз)   column-reverse (вверх)  */  

С помощью этого свойства можно сделать так, чтобы flex-элементы располагались не горизонтально (строками), а вертикально (колонками).

Свойства flex-direction

и flex-wrap можно указать с помощью универсального CSS свойства flex-flow:

  flex-flow: row nowrap; /* 1 значение - flex-direction, 2 значение - flex-wrap */  

Выравнивание flex-элементов

Во Flexbox выравнивание элементов внутри контейнера осуществляется по двум направлениям (осям).

Выравнивание flex-элементов по направлению главной оси

Выравнивание элементов вдоль основной оси осуществляется с помощью CSS свойства justify-content:

  justify-content: flex-start;   /*    flex-start (flex-элементы выравниваются относительно начала оси) – по умолчанию   flex-end (flex-элементы выравниваются относительно конца оси)   center (по центру flex-контейнера)   space-between (равномерно, т.е. с одинаковым расстоянием между flex-элементами)   space-around (равномерно, но с добавлением половины пространства перед первым flex-элементом и после последнего)  */  

Выравнивание flex-элементов вдоль поперечной оси

Выравнивание flex-элементов во flex-контейнере по направлению поперечной оси осуществляется с помощью CSS-свойства

align-items:

  align-items: stretch;  /*    stretch (растягиваются по всей длине поперечной оси) – по умолчанию   flex-start (относительно начала поперечной оси)   flex-end (относительно конца поперечной оси)   baseline (относительно базовой линии)   center (по центру)  */  

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

CSS Flexbox позволяет выравнивать не только сами flex-элементы, но и линии на которых они расположены.

  align-content: stretch  /*    stretch (растягиваются по всей длине поперечной оси) – по умолчанию   flex-start (относительно начала поперечной оси)   flex-end (относительно конца поперечной оси)   center (по центру)   space-between (равномерно, т.е.  

 одинаковым расстоянием между линиями)   space-around (равномерно, но с добавлением половины пространства перед первой линией и после последней)  */  

Свойство align-content имеет смысл использовать только тогда, когда flex-элементы во flex-контейнере располагаются на нескольких линиях. Чтобы это произошло, необходимо, во-первых, чтобы ширина всех flex-элементов была больше ширины flex-контейнера, а во-вторых flex-контейнер должен иметь в качестве CSS-свойства flex-wrap значение wrap или wrap-reverse.

CSS-свойство align-self

Свойство align-self в отличие от предыдущих (justify-content, align-items и align-content) предназначено для flex-элементов. Оно позволяет изменить выравнивание flex-элемента вдоль направления поперечной оси. Свойство align-self

может принимать такие же значения как align-items.

  align-items: stretch; /* auto (по умолчанию) || stretch || flex-start || flex-end || baseline || center */  

Пример:

  <div class="flex-container">   <div class="flex-container_element-1">   1   </div>   <div class="flex-container_element-2">   2   </div>   <div class="flex-container_element-3">   3   </div>   <div class="flex-container_element-4">   4   </div>   </div>  

CSS:

  .flex-container {   display: flex;   width: 300px;   height: 150px;   align-items: center;   padding: 10px;   background-color: #efefef;  }  .flex-container_element-1,  .flex-container_element-2,  .flex-container_element-3,  .flex-container_element-4 {   flex-basis: 70px;   text-align: center;   padding: 15px;   font-size: 30px;  }   .flex-container_element-1 {   align-self: flex-start;   background: #fe4;  }   .flex-container_element-2 {   align-self: flex-end;   background: pink;  }   .flex-container_element-3 {   align-self: stretch;   background: lime;  }  .flex-container_element-4 {   align-self: auto;   background: cyan;  }   

Изменение порядка следования flex-элементов

По умолчанию flex-элементы отображаются во flex-контейнере в том порядке, в котором они расположены в HTML коде. Для изменения порядка следования одних flex-элементов относительно других в CSS Flexbox можно использовать свойство order. Данное CSS свойство выстраивает flex-элементы во flex-контейнере в порядке возрастания их номеров.

  order: 0;   /*    0 (по умолчанию)   целое положительное или отрицательное число  */  

Например:

  <div class="flex-container">   <div class="flex-container_element-1">...</div>   <div class="flex-container_element-2">...</div>   <div class="flex-container_element-3">...</div>   <div class="flex-container_element-4">...</div>  </div>  CSS:  .flex-container {   display: flex;  }  /* переместим 2 flex-элемент в конец */  .flex-container_element-2 {   order: 2;  }   /* передвинем 3 элемент до 2 */  .flex-container_element-3 {   order: 1;  }  /* расположим 4 flex-элемент до 1 */  .flex-container_element-4 {   order: -1;  }  

Управление шириной flex-элемента

Во Flexbox есть несколько CSS свойств, определяющих то, какая ширина может быть у flex-элемента.

CSS-свойство flex-basis

Данное свойство предназначено для установления начальной ширины flex-элементу. Задавать значение ширины можно посредством различных единиц измерения, таких как px, %, em и др. По умолчанию данное свойство имеет значение auto (в этом случае ширина элемента будет рассчитываться автоматически на основании его содержимого).

Конечная ширина flex-элемента будет определяться в зависимости от значений CSS-свойств flex-grow и flex-shrink, которые установлены не только для этого элемента, но и для других flex-элементов этого flex-контейнера.

CSS-свойство flex-grow

Это свойство определяет, может ли начальная ширина flex-элемента увеличиваться (расти). Увеличение ширины flex-элемента осуществляется за счёт свободного пространства линии. В качестве значения CSS-свойства flex-grow

указывается целое число. Именно это значение и определяет (если оно больше или равно 1) какую часть свободного пространства flex-элемент заберёт себе.

Например:

  <div class="flex-container">   <div class="flex-container_element-1">...</div>   <div class="flex-container_element-2">...</div>   </div>  CSS:  .flex-container {   display: flex;   width: 600px;  }  .flex-container_element-1 {   flex-basis: 40%;   flex-grow: 1;  }   .flex-container_element-2 {   flex-basis: 40%;   flex-grow: 4;  }  

В этом примере, если flex-элементы расположены на одной линии и в ней есть свободное пространство (600×(1-0,8)=120px):

• к ширине элемента .flex-container_element-1 добавится 1/5 часть этого пространства (120×1/5=24px);
• к ширине элемента .flex-container_element-2 добавится 4/5 части этого пространства (120×4/5=96px).

Другими словами, CSS свойство flex-grow позволяет не просто указать, что ширина flex-элемента может вырасти, но и задать, насколько эта величина может вырасти по отношению к другим элементам.

По умолчанию CSS свойство flex-grow имеет значение 0. Это означает, что flex-элемент не может расти (увеличивать свою ширину).

CSS-свойство flex-shrink

Данное свойство определяет, может ли ширина flex-элемента уменьшиться. Уменьшение ширины flex-элемента будет осуществляться только в том случае, если ширины линии будет не достаточно для отображения всех flex-элементов, расположенных в ней. Необходимая ширина рассчитывается на основании начальной ширины, который имеет каждый flex-элемент в ней.

Например:

  <div class="flex-container">   <div class="flex-container_element-1">...</div>   <div class="flex-container_element-2">...</div>   </div>  CSS:  .flex-container {   display: flex;   width: 500px;  }  .flex-container_element-1 {   flex-basis: 300px;   flex-shrink: 1;  }   .flex-container_element-2 {   flex-basis: 300px;   flex-shrink: 3;  }  

Ширина flex-контейнера 500px. Для отображения flex-элементов необходимо 600px. В итоге не хватает 100px. В этом примере уменьшаться могут 2 flex-элемента (.flex-container_element-1 и .flex-container_element-2). Ширина первого flex-элемента .flex-container_element-1 в данном случае составит 300 – 1/4*100= 275px. Ширина второго flex-элемента .flex-container_element-2 в данном случае составит 300 – 3/4*100= 225px.

Значение по умолчанию:

  flex-shrink: 1;  

Если вам необходимо запретить уменьшение ширины flex-элементу, то в качестве значения свойства flex-shrink необходимо указать число 0.

CSS-свойство flex

Для удобной установки flex-grow, flex-shrink и flex-basis можно использовать CSS свойство flex.

Значение по умолчанию:

  flex: 0 1 auto;  /*   0 - flex-grow (1 значение)   1 - flex-shrink (2 значение)   auto - flex-basis (3 значение)  */  

Верстка макета страницы на CSS Flexbox

В этом разделе создадим простой адаптивный макет на Flexbox.

Структура макета будет состоять из 3 секций:

• header (для вывода заголовка и основного меню);
• main (для отображения основной части);
• footer (для футера).

Основную часть (main) в свою очередь разделим ещё на 2 раздела (их позиционирование будем осуществлять с помощью CSS Flexbox). На больших экранах (>=992px) эти разделы выстроим горизонтально, а на остальных — вертикально (<992px).

  <header class="container">   [Шапка страницы...]  </header>  <main class="container">   <div class="row-flex">   <article class="main_article col-flex">   [Основная часть...]   </article>   <aside class="main_aside col-flex">   [Дополнительная часть...]   </aside>   </div>  </main>  <footer class="container">   [Футер...]  </footer>  

CSS:

  /* контейнер (устанавливает ширину блока в зависимости от ширины viewport) */  .container {   position: relative;   margin-left: auto;   margin-right: auto;   padding-right: 15px;   padding-left: 15px;  }  @media (min-width: 576px) {   .container {   width: 540px;   max-width: 100%;   }  }  @media (min-width: 768px) {   .container {   width: 720px;   max-width: 100%;   }  }  @media (min-width: 992px) {   .container {   width: 960px;   max-width: 100%;   }  }  @media (min-width: 1200px) {   .container {   width: 1140px;   max-width: 100%;   }  }  /* flex-контейнер */  .row-flex {   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex;   -webkit-flex-wrap: wrap;   -ms-flex-wrap: wrap;   flex-wrap: wrap;   margin-right: -15px;   margin-left: -15px;  }  /* CSS настройки flex-элементов */  .col-flex {   position: relative;   width: 100%;   min-height: 1px;   padding-right: 15px;   padding-left: 15px;  }  /* ширина блоков article и aside по умолчанию */  .main_article, .main_aside {   -webkit-box-flex: 0;   -webkit-flex: 0 0 100%;   -ms-flex: 0 0 100%;   flex: 0 0 100%;   max-width: 100%;  }  /* ширина блоков article и aside для больших экранов */  @media (min-width: 992px) {   /* 2/3 от ширины контейнера */   .main_article {   -webkit-box-flex: 0;   -webkit-flex: 0 0 66.666667%;   -ms-flex: 0 0 66.666667%;   flex: 0 0 66.666667%;   max-width: 66.666667%;   }   /* 1/3 от ширины контейнера */   .main_aside {   -webkit-box-flex: 0;   -webkit-flex: 0 0 33.333333%;   -ms-flex: 0 0 33.333333%;   flex: 0 0 33.333333%;   max-width: 33.333333%;   }  }  

Для поддержки макета большинством браузеров добавим в CSS необходимые префиксы и max-width.

Для «превращения» блока во flex-контейнер будем использовать класс row-flex. Установку ширины каждому flex-элементу (main_article и main_aside) внутри flex-контейнера будем осуществлять с помощью CSS-свойства flex.

В качестве примера разметим посредством Flexbox ещё блок «Футер» и секцию раздела main-article «Интересненькое на сайте».

Секцию «Футер» разделим на 4 равные части (минимальная ширина одной части — 200px), а «Интересненькое на сайте» на 3 части (минимальная ширина одной части — 300px).

  <header class="container">   [Шапка страницы...]  </header>  <main class="container">   <div class="row-flex">   <article class="main_article col-flex">   [Основная часть...]   <!-- Секция "Интересненькое на сайте -->   <div class="row-flex">   <div class="main_other_article col-flex" style="min-width:300px">   [Ещё 1...]   </div>   <div class="main_other_article col-flex" style="min-width:300px">   [Ещё 2...]   </div>   <div class="main_other_article col-flex" style="min-width:300px">   [Ещё 3...]   </div>   </div>   </article>   <aside class="main_aside col-flex">   [Дополнительная часть...]   </aside>   </div>  </main>  <footer class="container">   <div class="row-flex">   <div class="footer_block col-flex" style="min-width:200px">   [Секция футера 1...]   </div>   <div class="footer_block col-flex" style="min-width:200px">   [Секция футера 2...]   </div>   <div class="footer_block col-flex" style="min-width:200px">   [Секция футера 3...]   </div>   <div class="footer_block col-flex" style="min-width:200px">   [Секция футера 4...]   </div>   </div>  </footer>  

Дополнительный CSS:

  .footer_block, .main_other_article {   -webkit-flex-basis: 0;   -ms-flex-preferred-size: 0;   flex-basis: 0;   -webkit-box-flex: 1;   -webkit-flex-grow: 1;   -ms-flex-positive: 1;   flex-grow: 1;   max-width: 100%;  }  

Демо макета страницы на Flexbox

itchief.ru

Что такое flexbox

• Содержание:
• 1. Основные понятия
• 2. Flex-контейнер
• 3. Flex-элементы
• 4. Порядок отображения flex-элементов и ориентация
• 4.1. Направление главной оси: flex-direction
• 4.2. Управление многострочностью flex-контейнера: flex-wrap
• 4.3. Краткая запись направления и многострочности: flex-flow
• 4.4. Порядок отображения flex-элементов: order
• 5. Гибкость flex-элементов
• 5.1. Задание гибких размеров одним свойством: flex
• 5.2. Коэффициент роста: flex-grow
• 5.3. Коэффициент сжатия: flex-shrink
• 5.4. Базовый размер: flex-basis
• 6. Выравнивание
• 6.1. Выравнивание по главной оси: justify-content
• 6.2. Выравнивание по поперечной оси: align-items и align-self
• 6.3. Выравнивание строк flex-контейнера: align-content

Поддержка браузерами

IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Основные понятия

Для описания модуля Flexbox используется определенный набор терминов. Значение flex-flow и режим записи определяют соответствие этих терминов физическим направлениям: верх / право / низ / лево, осям: вертикальная / горизонтальная и размерам: ширина / высота.

Главная ось (main axis) — ось, вдоль которой выкладываются flex-элементы. Она простирается в основном измерении.

Main start и main end — линии, которые определяют начальную и конечную стороны flex-контейнера, относительно которых выкладываются flex-элементы (начиная с main start по направлению к main end).

Основной размер (main size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что из них находится в основном измерении, определяют основной размер flex-контейнера или flex-элемента.

Поперечная ось (cross axis) — ось, перпендикулярная главной оси. Она простирается в поперечном измерении.

Cross start и cross end — линии, которые определяют начальную и конечную стороны поперечной оси, относительно которых выкладываются flex-элементы.

Поперечный размер (cross size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.

2. Flex-контейнер

Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнер не является блочным контейнером, поэтому для дочерних элементов не работают такие CSS-свойства, как float, clear, vertical-align. Также, на flex-контейнер не оказывают влияние свойства column-*, создающие колонки в тексте и псевдоэлементы ::first-line и ::first-letter.

Модель flexbox-разметки связана с определенным значением CSS-свойства display родительского html-элемента, содержащего внутри себя дочерние блоки. Для управления элементами с помощью этой модели нужно установить свойство display следующим образом:

.flex-container {  /*генерирует flex-контейнер уровня блока*/  display: -webkit-flex;   display: flex;   }  .flex-container {  /*генерирует flex-контейнер уровня строки*/   display: -webkit-inline-flex;   display: inline-flex;   }

После установки данных значений свойства каждый дочерний элемент автоматически становится flex-элементом, выстраиваясь в один ряд (вдоль главной оси). При этом блочные и строчные дочерние элементы ведут себя одинаково, т.е. ширина блоков равна ширине их содержимого с учетом внутренних полей и рамок элемента.

Если родительский блок содержит текст или изображения без оберток, они становятся анонимными flex-элементами. Текст выравнивается по верхнему краю блока-контейнера, а высота изображения становится равной высоте блока, т.е. оно деформируется.

3. Flex-элементы

Flex-элементы — блоки, представляющие содержимое flex-контейнера в потоке. Flex-контейнер устанавливает новый контекст форматирования для своего содержимого, который обуславливает следующие особенности:

• Для flex-элементов блокируется их значение свойства display. Значение display: inline-block; и display: table-cell; вычисляется в display: block;.
• Пустое пространство между элементами исчезает: оно не становится своим собственным flex-элементом, даже если межэлементный текст обернут в анонимный flex-элемент. Для содержимого анонимного flex-элемента невозможно задать собственные стили, но оно будет наследовать их (например, параметры шрифта) от flex-контейнера.
• Абсолютно позиционированный flex-элемент не участвует в компоновке гибкого макета.
• Поля margin соседних flex-элементов не схлопываются.
• Процентные значения margin и padding вычисляются от внутреннего размера содержащего их блока.
• margin: auto; расширяются, поглощая дополнительное пространство в соответствующем измерении. Их можно использовать для выравнивания или раздвигания смежных flex-элементов.
• Автоматический минимальный размер flex-элементов по умолчанию является минимальным размером его содержимого, то есть min-width: auto;. Для контейнеров с прокруткой автоматический минимальный размер обычно равен нулю.

4. Порядок отображения flex-элементов и ориентация

Содержимое flex-контейнера можно разложить в любом направлении и в любом порядке (переупорядочение flex-элементов внутри контейнера влияет только на визуальный рендеринг).

4.1. Направление главной оси: flex-direction

Свойство относится к flex-контейнеру. Управляет направлением главной оси, вдоль которой укладываются flex-элементы, в соответствии с текущим режимом записи. Не наследуется.

flex-direction
Значения:
row	Значение по умолчанию, слева направо (в rtl справа налево). Flex-элементы выкладываются в строку. Начало (main-start) и конец (main-end) направления главной оси соответствуют началу (inline-start) и концу (inline-end) инлайн-оси (inline-axis).
row-reverse	Направление справа налево (в rtl слева направо). Flex-элементы выкладываются в строку относительно правого края контейнера (в rtl — левого).
column	Направление сверху вниз. Flex-элементы выкладываются в колонку.
column-reverse	Колонка с элементами в обратном порядке, снизу вверх.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {  display: -webkit-flex;   -webkit-flex-direction: row-reverse;  display: flex;  flex-direction: row-reverse;  }

4.2. Управление многострочностью flex-контейнера: flex-wrap

Свойство определяет, будет ли flex-контейнер однострочным или многострочным, а также задает направление поперечной оси, определяющее направление укладки новых линий flex-контейнера.

По умолчанию flex-элементы укладываются в одну строку, вдоль главной оси. При переполнении они будут выходить за пределы ограничивающей рамки flex-контейнера. Свойство не наследуется.

flex-wrap
Значения:
nowrap	Значение по умолчанию. Flex-элементы не переносятся, а располагаются в одну линию слева направо (в rtl справа налево).
wrap	Flex-элементы переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении слева направо (в rtl справа налево).
wrap-reverse	Flex-элементы переносятся на новые линии, располагаясь в обратном порядке слева-направо, при этом перенос происходит снизу вверх.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {  display: -webkit-flex;   -webkit-flex-wrap: wrap;  display: flex;  flex-wrap: wrap;  }

4.3. Краткая запись направления и многострочности: flex-flow

Свойство позволяет определить направления главной и поперечной осей, а также возможность переноса flex-элементов при необходимости на несколько строк. Представляет собой сокращённую запись свойств flex-direction и flex-wrap. Значение по умолчанию flex-flow: row nowrap;. свойство не наследуется.

flex-flow
Значения:
направление	Указывает направление главной оси. Значение по умолчанию row.
многострочность	Задаёт многострочность поперечной оси. Значение по умолчанию nowrap.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {  display: -webkit-flex;   -webkit-flex-flow: row wrap;   display: flex;  flex-flow: row wrap;  }

4.4. Порядок отображения flex-элементов: order

Свойство определяет порядок, в котором flex-элементы отображаются и располагаются внутри flex-контейнера. Применяется к flex-элементам. Свойство не наследуется.

Первоначально все flex-элементы имеют order: 0;. При указании значения от -1 для элемента он перемещается в начало сроки, значение 1 — в конец. Если несколько flex-элементов имеют одинаковое значение order, они будут отображаться в соответствии с исходным порядком.

order
Значения:
число	Свойство задается целым числом, отвечающим за порядок отображения flex-элементов. Значение по умолчанию 0.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {  display: -webkit-flex;  display: flex;  }  .flex-item {  -webkit-order: 1;  order: 1;  }

5. Гибкость flex-элементов

Определяющим аспектом гибкого макета является возможность «сгибать» flex-элементы, изменяя их ширину / высоту (в зависимости от того, какой размер находится на главной оси), чтобы заполнить доступное пространство в основном измерении. Это делается с помощью свойства flex. Flex-контейнер распределяет свободное пространство между своими дочерними элементами (пропорционально их коэффициенту flex-grow) для заполнения контейнера или сжимает их (пропорционально их коэффициенту flex-shrink), чтобы предотвратить переполнение.

Flex-элемент будет полностью «негибок», если его значения flex-grow и flex-shrink равны нулю, и «гибкий» в противном случае.

5.1. Задание гибких размеров одним свойством: flex

Свойство является сокращённой записью свойств flex-grow, flex-shrink и flex-basis. Значение по умолчанию: flex: 0 1 auto;. Можно указывать как одно, так и все три значения свойств. Свойство не наследуется.

W3C рекомендует использовать сокращённую запись, так как она правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.

flex
Значения:
коэффициент растяжения	Коэффициент увеличения ширины flex-элемента относительно других flex-элементов.
коэффициент сужения	Коэффициент уменьшения ширины flex-элемента относительно других flex-элементов.
базовая ширина	Базовая ширина flex-элемента.
auto	Эквивалентно flex: 1 1 auto;.
none	Эквивалентно flex: 0 0 auto;.
initial	Устанавливает значение свойства в значение по умолчанию. Эквивалентно flex: 0 1 auto;.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {  display: -webkit-flex;  display: flex;  }  .flex-item {  -webkit-flex: 3 1 100px;   -ms-flex: 3 1 100px;   flex: 3 1 100px;  }

5.2. Коэффициент роста: flex-grow

Свойство определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства. Если сумма значений flex-grow flex-элементов в строке меньше 1, они занимают менее 100% свободного пространства. Свойство не наследуется.

flex-grow
Значения:
число	Положительное целое или дробное число, устанавливающее коэффициент роста flex-элемента. Значение по умолчанию 0.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {  display: -webkit-flex;  display: flex;  }  .flex-item {  -webkit-flex-grow: 3;   flex-grow: 3;  }

5.3. Коэффициент сжатия: flex-shrink

Свойство указывает коэффициент сжатия flex-элемента относительно других flex-элементов при распределении отрицательного свободного пространства. Умножается на базовый размер flex-basis. Отрицательное пространство распределяется пропорционально тому, насколько элемент может сжаться, поэтому, например, маленький flex-элемент не уменьшится до нуля, пока не будет заметно уменьшен flex-элемент большего размера. Свойство не наследуется.

flex-shrink
Значения:
число	Положительное целое или дробное число, устанавливающее коэффициент уменьшения flex-элемента. Значение по умолчанию 1.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {  display: -webkit-flex;  display: flex;  }  .flex-item {  -webkit-flex-shrink: 3;   flex-shrink: 3;  }

5.4. Базовый размер: flex-basis

Свойство устанавливает начальный основной размер flex-элемента до распределения свободного пространства в соответствии с коэффициентами гибкости. Для всех значений, кроме auto и content, базовый гибкий размер определяется так же, как width в горизонтальных режимах записи. Процентные значения определяются относительно размера flex-контейнера, а если размер не задан, используемым значением для flex-basis являются размеры его содержимого. Не наследуется.

flex-basis
Значения:
auto	Значение по умолчанию. Элемент получает базовый размер, соответствующий размеру его содержимого (если он не задан явно).
content	Определяет базовый размер в зависимости от содержимого flex-элемента.
длина	Базовый размер определяется так же, как для ширины и высоты. Задается в единицах длины.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {  display: -webkit-flex;  display: flex;  }  .flex-item {  -webkit-flex-basis: 100px;   flex-basis: 100px;  }

6. Выравнивание

6.1. Выравнивание по главной оси: justify-content

Свойство выравнивает flex-элементы по главной оси flex-контейнера, распределяя свободное пространство, незанятое flex-элементами. Когда элемент преобразуется в flex-контейнер, flex-элементы по умолчанию сгруппированы вместе (если для них не заданы поля margin). Промежутки добавляются после расчета значений margin и flex-grow. Если какие-либо элементы имеют ненулевое значение flex-grow или margin: auto;, свойство не будет оказывать влияния. Свойство не наследуется.

justify-content
Значения:
flex-start	Значение по умолчанию. Flex-элементы выкладываются в направлении, идущем от начальной линии flex-контейнера.
flex-end	Flex-элементы выкладываются в направлении, идущем от конечной линии flex-контейнера.
center	Flex-элементы выравниваются по центру flex-контейнера.
space-between	Flex-элементы равномерно распределяются по линии. Первый flex-элемент помещается вровень с краем начальной линии, последний flex-элемент — вровень с краем конечной линии, а остальные flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя соседними элементами было одинаковым. Если оставшееся свободное пространство отрицательно или в строке присутствует только один flex-элемент, это значение идентично параметру flex-start.
space-around	Flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя смежными flex-элементами было одинаковым, а расстояние между первым / последним flex-элементами и краями flex-контейнера составляло половину от расстояния между flex-элементами.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {  display: -webkit-flex;   -webkit-justify-content: flex-start;  display: flex;  justify-content: flex-start;  }

6.2. Выравнивание по поперечной оси: align-items и align-self

Flex-элементы можно выравнивать по поперечной оси текущей строки flex-контейнера. align-items устанавливает выравнивание для всех элементов flex-контейнера, включая анонимные flex-элементы. align-self позволяет переопределить это выравнивание для отдельных flex-элементов. Если любое из поперечных margin flex-элемента имеет значение auto, align-self не имеет никакого влияния.

6.2.1. Align-items

Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по поперечной оси. Не наследуется.

align-items
Значения:
flex-start	Верхний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через начало поперечной оси.
flex-end	Нижний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через конец поперечной оси.
center	Поля flex-элемента центрируется по поперечной оси в пределах flex-линии.
baseline	Базовые линии всех flex-элементов, участвующих в выравнивании, совпадают.
stretch	Если поперечный размер flex-элемента вычисляется как auto и ни одно из поперечных значений margin не равно auto, элемент растягивается. Значение по умолчанию.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {  display: -webkit-flex;  -webkit-align-items: flex-start;  display: flex;  align-items: flex-start;  }

6.2.2. Align-self

Свойство отвечает за выравнивание отдельно взятого flex-элемента по высоте flex-контейнера. Переопределяет выравнивание, заданное align-items. Не наследуется.

align-self
Значения:
auto	Значение по умолчанию. Flex-элемент использует выравнивание, указанное в свойстве align-items flex-контейнера.
flex-start	Верхний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через начало поперечной оси.
flex-end	Нижний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через конец поперечной оси.
center	Поля flex-элемента центрируется по поперечной оси в пределах flex-линии.
baseline	Flex-элемент выравнивается по базовой линии.
stretch	Если поперечный размер flex-элемента вычисляется как auto и ни одно из поперечных значений margin не равно auto, элемент растягивается. Значение по умолчанию.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {  display: -webkit-flex;  display: flex;  }  .flex-item {  -webkit-align-self: center;   align-self: center;  }

6.3. Выравнивание строк flex-контейнера: align-content

Свойство выравнивает строки в flex-контейнере при наличии дополнительного пространства на поперечной оси, аналогично выравниванию отдельных элементов на главной оси с помощью свойства justify-content. Свойство не влияет на однострочный flex-контейнер. Не наследуется.

align-content
Значения:
flex-start	Строки укладываются по направлению к началу flex-контейнера. Край первой строки помещается вплотную к краю flex-контейнера, каждая последующая — вплотную к предыдущей строке.
flex-end	Строки укладываются по направлению к концу flex-контейнера. Край последней строки помещается вплотную к краю flex-контейнера, каждая предыдущая — вплотную к последующей строке.
center	Строки укладываются по направлению к центру flex-контейнера. Строки расположены вплотную друг к другу и выровнены по центру flex-контейнера с равным расстоянием между начальным краем содержимого flex-контейнера и первой строкой и между конечным краем содержимого flex-контейнера и последней строкой.
space-between	Строки равномерно распределены в flex-контейнере. Если оставшееся свободное пространство отрицательно или в flex-контейнере имеется только одна flex-линия, это значение идентично flex-start. В противном случае край первой строки помещается вплотную к начальному краю содержимого flex-контейнера, край последней строки — вплотную к конечному краю содержимого flex-контейнера. Остальные строки распределены так, чтобы расстояние между любыми двумя соседними строками было одинаковым.
space-around	Строки равномерно распределены в flex-контейнере с половинным пробелом на обоих концах. Если оставшееся свободное пространство отрицательно, это значение идентично центcenter. В противном случае строки распределяются таким образом, чтобы расстояние между любыми двумя соседними строками было одинаковым, а расстояние между первой / последней строками и краями содержимого flex-контейнера составляло половину от расстояния между строками.
stretch	Значение по умолчанию. Строки flex-элементов равномерно растягиваются, заполняя все доступное пространство. Если оставшееся свободное пространство отрицательно, это значение идентично flex-start. В противном случае свободное пространство будет разделено поровну между всеми строками, увеличивая их поперечный размер.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {  display: -webkit-flex;  -webkit-flex-flow: row wrap;  -webkit-align-content: flex-end;   display: flex;  flex-flow: row wrap;  align-content: flex-end;  height: 100px;  }

По материалам CSS Flexible Box Layout Module Level 1

html5book.ru

Начинаем погружение

Flexbox определяет набор CSS свойств для контейнера (flex-контейнер) и его дочерних элементов (flex-блоков). Первое, что нужно сделать – это указать контейнеру display:flex или display:inline-flex.

HTML

<div class="my-flex-container">  <div class="my-flex-block">item1</div>  <div class="my-flex-block">item2</div>  <div class="my-flex-block">item3</div> </div> 

CSS

.my-flex-container{  display: flex; } 

Основные свойства flex-контейнера. Главная и поперечная ось.

Одним из основных понятий в fleхbox являются оси.

• Главной осью flex-контейнера является направление, в соответствии с которым располагаются все его дочерние элементы.
• Поперечной осью называется направление, перпендикулярное главной оси.

Главная ось в ltr локали по умолчанию располагается слева направо. Поперечная – сверху вниз. Направление главной оси flex-контейнера можно задавать, используя базовое css свойство flex-direction.

flex-direction – направление главной оси

Доступные значения flex-direction:

• row (значение по умолчанию) : слева направо (в rtl справа налево)
• row-reverse: справа налево (в rtl слева направо)
• column: сверху вниз
• column-reverse: снизу вверх

justify-content – выравнивание по главной оси.

Css свойство justify-content определяет то, как будут выровнены элементы вдоль главной оси.

Доступные значения justify-content:

• flex-start (значение по умолчанию) : блоки прижаты к началу главной оси
• flex-end: блоки прижаты к концу главной оси
• center: блоки располагаются в центре главной оси
• space-between: первый блок располагается в начале главной оси, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве.
• space-around: все блоки равномерно распределены вдоль главной оси, разделяя все свободное пространство поровну.

align-items – выравнивание по поперечной оси.

Css свойство align-items определяет то, как будут выровнены элементы вдоль поперечной оси.

Доступные значения align-items:

• flex-start: блоки прижаты к началу поперечной оси
• flex-end: блоки прижаты к концу поперечной оси
• center: блоки располагаются в центре поперечной оси
• baseline: блоки выровнены по их baseline
• stretch (значение по умолчанию) : блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width/max-width, если таковые заданы.

СSS свойства flex-direction, justify-content, align-items должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

Демо основных свойств flex-контейнера

Оси и выравнивания по ним – это основы flex. Расслабьтесь, покликайте по демке и используйте ее, если нужно будет освежить в памяти.

flexbox demo

Многострочная организация блоков внутри flex-контейнера.

flex-wrap

Все примеры, которые мы приводили выше, были построены с учетом однострочного (одностолбцового) расположения блоков. Надо сказать, что по умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, спецификацией также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap.

Доступные значения flex-wrap:

• nowrap (значение по умолчанию) : блоки расположены в одну линию слева направо (в rtl справа налево)
• wrap: блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они следуют друг за другом слева направо (в rtl справа налево)
• wrap-reverse: то-же что и wrap, но блоки располагаются в обратном порядке.

flex-flow – удобное сокращение для flex-direction + flex-wrap

По сути,flex-flow предоставляет возможность в одном свойстве описать направление главной и многострочность поперечной оси. По умолчанию flex-flow: row nowrap.

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

CSS

/* т.е. ... */  .my-flex-block{  flex-direcrion:column;  flex-wrap: wrap; }  /* это то же самое, что ... */  .my-flex-block{  flex-flow: column wrap; } 

align-content

Существует также свойство align-content, которое определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера.

Важно: align-content работает только в многострочном режиме (т.е. в случае flex-wrap:wrap; или flex-wrap:wrap-reverse;)

Доступные значения align-content:

• flex-start: ряды блоков прижаты к началу flex-контейнера.
• flex-end: ряды блоков прижаты к концу flex-контейнера
• center: ряды блоков находятся в центре flex-контейнера
• space-between: первый ряд блоков располагается в начале flex-контейнера, последний ряд блоков блок – в конце, все остальные ряды равномерно распределены в оставшемся пространстве.
• space-around: ряды блоков равномерно распределены в от начала до конца flex-контейнера, разделяя все свободное пространство поровну.
• stretch (значение по умолчанию): Ряды блоков растянуты, дабы занять все имеющееся пространство.

СSS свойства flex-wrap и align-content должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

Демо свойств многострочности в flex

flexbox demo

CSS правила для дочерних элементов flex-контейнера (flex-блоков)

flex-basis – базовый размер отдельно взятого flex-блока

Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. Может быть задан в любых единицах измерения длинны (px, em, %, …) или auto(по умолчанию). Если задан как auto – за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.

flex-grow – “жадность” отдельно взятого flex-блока

Определяет то, на сколько отдельный flex-блок может быть больше соседних элементов, если это необходимо. flex-grow принимает безразмерное значение ( по умолчанию 0)

Пример 1:

• Если все flex-блоки внутри flex-контейнера имеют flex-grow:1, то они будут одинакового размера
• Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные

Пример 2:

• Если все flex-блоки внутри flex-контейнера имеют flex-grow:3, то они будут одинакового размера
• Если один из них имеет flex-grow:12, то он будет в 4 раза больше, чем все остальные

Т.е абсолютное значение flex-grow не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.

flex-shrink – фактор “сжимаемости” отдельно взятого flex-блока

Определяет, насколько flex-блок будет уменьшаться относительно соседних эдементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен 1.

flex – короткая запись для свойств flex-grow, flex-shrink и flex-basis

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

CSS

/* т.е. ... */  .my-flex-block{  flex-grow:12;  flex-shrink:3;  flex basis: 30em; }  /* это то же самое, что ... */  .my-flex-block{  flex: 12 3 30em; } 

Демо для flex-grow, flex-shrink и flex-basis

flexbox demo

align-self – выравнивание отдельно взятого flex-блока по поперечной оси.

Делает возможным переопределять свойство flex-контейнера align-items для отдельного flex-блока.

Доступные значения align-self (те же 5 вариантов, что и для align-items)

• flex-start: flex-блок прижат к началу поперечной оси
• flex-end: flex-блок прижат к концу поперечной оси
• center: flex-блок располагаются в центре поперечной оси
• baseline: flex-блок выравнен по baseline
• stretch (значение по умолчанию) : flex-блок растянут, чтобы занять все доступное место по поперечной оси, при этом учитываются min-width/max-width, если таковые заданы.

order – порядок следования отдельно взятого flex-блока внутри flex-контейнера.

По умолчанию все блоки будут следовать друг за другом в порядке, заданном в html. Однако этот порядок можно изменить с помощью свойства order. Оно задается целым числом и по умолчанию равно 0.

Значение order не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.

HTML

<div class="my-flex-container">  <div class="my-flex-block" style="order: 5" >item1</div>  <div class="my-flex-block" style="order: 10">item2</div>  <div class="my-flex-block" style="order: 5" >item3</div>  <div class="my-flex-block" style="order: 5" >item4</div>  <div class="my-flex-block" style="order: 0" >item5</div> </div> 

В данном случае, блоки будут следовать один за другим вдоль главной оси в следующем порядке: item5, item1, item3, item4, item2

Демо для align-self и order

flexbox demo

margin: auto по вертикали. Мечты сбываются!

Flexbox можно любить хотя бы за то, что привычное всем выравнивание по горизонтали через margin:auto здесь работает и для вертикали!

.my-flex-container {  display: flex;  height: 300px; /* Или что угодно */ }  .my-flex-block {  width: 100px; /* Или что угодно */  height: 100px; /* Или что угодно */  margin: auto; /* Магия! Блок отцентрирован по вертикали и горизонтали! */ } 

Вещи, которые следует помнить

1. Не следует использовать flexbox там, где в этом нет необходимости.
2. Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.
3. Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.
4. Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям. Также важно помнить, что margin-ы в flexbox не “коллапсятся”, как это происходит в обычном потоке.
5. Значение float у flex-блоков не учитывается и не имеет значения. Это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.
6. flexbox очень хорошо подходит для верстки веб-компонентов и отдельных частей веб-страниц, но показал себя не с лучшей стороны при верстке базовых макетов (расположение article, header, footer, navbar и т.п.). Это все еще спорный момент, но эта статья довольно убедительно показывает недостатки xanthir.com/blog/b4580

В заключение

Я думаю, что flexbox, конечно же, не вытеснит все остальные способы верстки, но, безусловно, в ближайшее время займет достойную нишу при решении огромного количества задач. И уж точно, пробовать работать с ним нужно уже сейчас. Одна из следующих статей будет посвящена конкретным примерам работы с flex-версткой. Подписывайтесь на новости 😉

html5.by