Наш блог

Flexbox - практичность адаптивной верстки

Flexbox - практичность адаптивной верстки

Кравчук Виктор
Middle Front-End Developer
08.07.16
11184

Flexbox это удобная технология верстки, которая может стать не заменимым инструментом для построения HTML шаблонов.

Любой верстальщик при разработке проектов имеет определенную стратегию для разметки. Многие пишут чистый html или используют популярные фреймворки. Если верстальщик комфортно себя чуствует при работе с привычными технологиями, и достигает успехов, это есть показатель хорошего специалиста. Но Flexbox может стать незаменимим вспомогательным или основным инструментом для организации грамотного кода.

Разработчики на протяжении долгого времени использовали для верстки таблицы, float-элементы, inline-block и другие CSS свойства, чтобы придать блокам нужное расположение. Простые вещи, как вертикальное центрирование, осуществлялись достаточно сложно. Создание же макета на основе гибких сеток считается грамотной практикой, вот почему широкое распространение получили CSS-фреймворки на основе сеток.

Главная задумка вёрстки с помощью flexbox в наделении контейнера способностью изменять ширину/высоту (и порядок) своих элементов для наилучшего заполнения пространства (в большинстве случаев — для поддержки всех видов дисплеев и размеров экранов).

Основная спецификация CSS Flexible Box Layout Module (или просто Flexbox) – дает отличные инструменты для решения большого количества разнообразных задач. Flexbox дает возможность держать под контролем размер, порядок и выравнивание элементов по нескольким осям. Также можно контролировать распределение свободного места между элементами и многое другое.

Flexbox имеет ряд преимущества:

  1. Само название "flex" дает понять, что все блоки очень легко можно сделать гибкими. Необходимые элементы можно сжать и растянуть по специальным правилам, заняв таким образом все нужное пространство.
  2. Базовая линия текста легко выравнивается по вертикали и горизонтали.
  3. Порядок расположения элементов в шаблоне не играет решающую роль. При необходимости его можно поменять в стилях, что является особенно важным для некоторых аспектов адаптивной верстки.
  4. Для заполнения всего предоставленного места элементы могут автоматически выстроиться в несколько строк или столбцов.
  5. Большинство языков мира имеют форму написания справа-налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right). Особенность flexbox состоит в том, что он адаптирован для этого, так как для него есть понятие начала и конца, а не права и лева. В браузерах с настройкой rtl все элементы автоматически располагаются в реверсном порядке.
  6. Синтаксис правил CSS интуитивно прост и достаточно быстро осваивается.


История Flexbox

  • 2008 год – CSS Working Group проводит обсуждение приложения "Flexible Box Model", основанного на XUL (XML User Interface Language – язык разметки в приложениях Mozilla) and XAML (Extensible Application Markup Language – язык разметки для приложений Microsoft).
  • 2009 год – опубликован черновик "Flexible Box Layout Module". Chrome и Safari добавляют частичную поддержку, в то время, когда Mozilla начинает поддерживать XUL-подобный синтаксис, известный как "Flexbox 2009". Если, во время чтения блог-поста или поиска информации о Flexbox из любого другого источника, вам попадаться такие выражения как display: box; или свойства подобные box - {*}, то это означает, что перед вами устаревшая версия 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 года – все новые браузеры поддерживают последнюю спецификацию (даже Internet Explorer 11). Если же какое-либо руководство или блог-пост о Flexbox содержат такие конструкции, как display: flex; и flex- {*}, то они отображают актуальную информацию, которая содержится в текущей версии спецификации.


Поддержка браузеров

Как это ни странно, но устаревший синтаксис, образца 2009 года достаточно неплохо поддерживается большинством браузеров, поддержка реализована в: Chrome, Firefox 2+, Safari 3.1+ и пр. Она есть практически везде, за исключением IE 9 и ранних версиях IE и Opera. Но к сожалению, реализация данной технологии в браузерах была неполной и частично несогласованной, что и стало причиной пересмотра спецификации.

Несмотря на то, что старый синтаксис поддерживается браузерами, его использование не рекомендуется, причине того, что старая версия спецификации уже является не актуальной. В будущем, через определенный промежуток времени браузеры непременно вовсе прекратят ее поддержку. В любом случае, поскольку новый синтаксис значительно проще в изучении и применении, то вероятней всего именно его реализация будет более глубокой. Те браузеры, которые до сих пор еще не поддерживали модули Flexbox, начнут это делать уже в новой форме, предусмотренной последней спецификацией, которая получила статус CR. (Candidate Recommendation — *кандидат в рекомендации стандарта, а значит технически уже готов к реализации и не должен подвергаться изменениям.)



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



Чтокасается IE 10, то это, пожалуй, единственный случай поддержки промежуточной, не совершенной версии Flexbox (в которой используется значение display: flexbox;). (*Более того, она требует применения вендорного префикса -ms-).


Основны синтаксиса

Так как flexbox – это целый модуль, а не просто единичное свойство, он объединяет в себе множество свойств. Некоторые из них должны применяться к контейнеру (родительскому элементу, так называемому flex-контейнеру), в то время как другие свойства применяются к дочерним элементам, или flex-элементам.

Для начала использования нужно указать контейнеру display:flex или display:inline-flex.

HTML

<div class="flex_container">
  <div class="flex_block">Flex блок 1</div>
  <div class="flex_block">Flex блок 2</div>
  <div class="flex_block">Flex блок 3</div>
  <div class="flex_block">Flex блок 4</div>
</div>


CSS

.flex_container {
  display: flex;
}


Основные свойства flex-контейнера.

Одно из основных понятий в fleхbox – это оси.

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

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


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



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

Доступные значения 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-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.

CSS

.flex_container{
  flex-direcrion:column;
  flex-wrap: wrap;
}
/* или */
.flex_container{
  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 (значение по умолчанию): Ряды блоков растянуты, дабы занять все имеющееся пространство.




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

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


CSS

.flex_block{
  flex-grow:12;
  flex-shrink:3;
  flex basis: 30em;
}
/* или */
.flex_block{
  flex: 12 3 30em;
}


Демо flex-grow, flex-shrink и flex-basis

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

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

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

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


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

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

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

HTML

<div class="flex_container">
  <div class="flex_block" style="order: 5" >Flex блок 1</div>
  <div class="flex_block" style="order: 10" >Flex блок 2</div>
  <div class="flex_block" style="order: 5" >Flex блок 3</div>
  <div class="flex_block" style="order: 5" >Flex блок 4</div>
  <div class="flex_block" style="order: 0" >Flex блок 5</div>
</div>

В данном случае, блоки будут следовать один за другим вдоль главной оси в следующем порядке: Flex блок 5, Flex блок 1, Flex блок 3, Flex блок 4, Flex блок 2

Демо align-self и order

Bootstrap наконец-то начал поддерживать flexbox. В Bootstrap 4 Flexbox будет задействован для следующих компонентов:

  • вся система сеток (миксины и предопределенные классы), которые перейдут с float на display: flex;
  • формы ввода display: table; сменит display: flex;
  • медиа компоненты перейдут display: table;

Используйте Flexbox - это круто!

Поделиться с друзьями

Сделайте заказ услуги прямо сейчас