Все о flexbox: примеры использования, свойства и преимущества



В «арсенале» любого верстальщика всегда есть как минимум несколько способов выравнивания чего-либо по вертикали или разработки трехколоночного макета с резиновой колонкой в середине. Все эти способы объединяет несколько общих черт: они довольно странны, не всегда подходят, похожи на хак, сложны для восприятия, а кроме того – перестают работать при несоблюдении некоторых математических условий, сложенных исторически.

Сначала веб-страницы выглядели, как однопоточные текстовые документы, немного позднее появилась табличная верстка, затем в моду вошла верстка float-ами, позже разбиение страницы на блоки стали делать еще и с помощью inline-block. Как следствие – все эти приемы (ну почти все) используются для построения лейаутов 99% существующих веб-страниц.

Изменить ситуацию в лучшую сторону призвана спецификация CSS Flexible Box Layout Module (упрощенно – Flexbox). Flexbox css – это не просто единичное свойство, а полноценный модуль, включающий в себя целый набор свойств, часть из которых применяется к родительскому элементу (flex-контейнеру), а часть – к дочерним элементам (flex-элементам).

Преимущества flexbox

  1. Flexbox-блоки, как это следует из самого названия «flex», легко делаются «резиновыми». Задав соответствующие правила, можно добиться сжатия и растягивания элементов в той области, которой оно нужно.
  2. Отлично работает выравнивание по горизонтали и вертикали.
  3. Расположение элементов в html можно поменять в CSS, что особенно важно в некоторых аспектах responsive верстки.
  4. Элементы могут самостоятельно выстраиваться в несколько столбцов и строк, занимая все предоставленное место.
  5. Синтаксис flexbox css правил несложен и довольно быстро осваивается.

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

Практически все современные браузеры поддерживают flexbox. Исключение – многострадальный Internet Explorer, который может работать со спецификацией 2011 года только с 10-й версии. Заминка только в нем.

Свойства flexbox

display: flex | inline-flex

Применяется к родительскому эл-ту flex-контейнера

display: flex | inline-flex | other values

Определяет инлайновый или блочный, в зависимости от выбранного значения, flex-контейнер, делает активным flex-контекст для всех его потомков. Важно понимать, что столбцы columns не работают вместе с flex-контейнером, а float, clear и vertical-align – с flex-элементами.

flex-direction

Применяется к родительскому эл-ту flex-контейнера

flex-direction: row | row-reverse | column | column-reverse

Обозначает линию главной оси. Главной осью называют направление, по которому располагаются его дочерние элементы, поперечной – направление, перпендикулярное главной оси.

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

justify-content

Применяется к родительскому эл-ту flex-контейнера

Задает выравнивание элементов вдоль главной оси.

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

align-items

Применяется к родительскому эл-ту flex-контейнера

Еще одно css-свойство модуля Flexbox, определяющее выравнивание элементов вдоль поперечной оси.

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

flex-wrap

Применяется к родительскому эл-ту flex-контейнера

flex-wrap: nowrap | wrap | wrap-reverse

Задает одно- или многострочность контейнера, а также направление поперечной оси, в соответствии с которой будут располагаться новые строки.

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

1286916650_vtdocr5pyb29fnlИспользование flexbox css позволит существенно упростить верстку. Хотите, чтобы SEO работало на благо Вашего бизнеса, приносило на сайт посетителей и клиентов? Нужна действительно эффективная поисковая оптимизация?

Получить консультацию

или позвоните +7(495)638-50-80

flex-flow

Применяется к родительскому эл-ту flex-контейнера

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

Это, по сути, сокращенная форма написания свойств flex-direction и flex-wrap, которые, как вы помните, задают направление главной и поперечной оси. Установленные по умолчанию значения: row, nowrap

align-content

Применяется кродительскому эл-ту flex-контейнера

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

Внимание! align-content не работает в однострочном режиме. Использовать это свойство можно лишь в случае flex-wrap: wrap; или flex-wrap: wrap-reverse;.

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

flex-basis

Применяется к дочернему эл-ту flex-контейнера

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

В последнем случае за основу берутся width и height блока, зависящие в свою очередь от размера контента (если не указаны явно).

flex-grow

Применяется к дочернему эл-ту flex-контейнера

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

Случай №1

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

Случай №2

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

Проще говоря, абсолютное значение flex-grow не задает точную ширину, а определяет степень его «жадности» по отношению к другим блокам того же уровня.

flex-shrink

Применяется к дочернему эл-ту flex-контейнера

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

flex

Применяется к дочернему эл-ту flex-контейнера

Представляет собой сокращенный вариант записи свойств flex-grow, flex-shrink, flex-basis. Форма записи следующая:

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

align-self

Применяется к дочернему эл-ту flex-контейнера

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

1286916650_vtdocr5pyb29fnlИспользование flexbox css позволит существенно упростить верстку. Хотите, чтобы SEO работало на благо Вашего бизнеса, приносило на сайт посетителей и клиентов? Нужна действительно эффективная поисковая оптимизация?

Получить консультацию

или позвоните +7(495)638-50-80

order

Применяется к дочернему эл-ту flex-контейнера

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

margin: auto;

Одно из главных преимуществ флексбокс-элементов состоит в том, что margin: auto; в них работает и по вертикали.

Flexbox: примеры использования

Начнем с малого – банального выравнивания точно по центру, которое встречается практически каждый день. Flexbox css отлично справляется с задачей, в чем вы можете убедиться сами.

.parent {
display: flex;
height: 300px; /* Или что угодно */
}
.child {
width: 100px; /* Или что угодно */
height: 100px; /* Или что угодно */
margin: auto; /* Магия! */
}

Теперь попробуем использовать какие-то свойства. Допустим, нам нужен набор из шести элементов фиксированного размера с возможностью изменения размеров контейнера. Кроме того, нам нужна адаптивность – т.е., чтобы при изменении размера окна браузера все было корректно, ничего нигде не «ехало». При этом есть обязательное условие не использовать @media-запросы.

.flex-container {
/* Здесь мы создаем flex-контекст */
display: flex; /* Теперь определим направление потока и хотим ли мы, чтобы элементы переносились на новую строку
* Помните, что это тоже самое, что и:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Теперь определим, как будет распределяться пространство */
justify-content: space-around;
}

Ну вот, готово. Осталось лишь поработать над оформлением. По этой ссылке вы можете посмотреть, что получилось. Обязательно уменьшите или увеличьте окно браузера и посмотрите, что получится.

Как вы видите, ничего сложного в том, чтобы сделать верстку резиновой с помощью flexbox, нет. Flexbox css, конечно же, вряд ли сможет вытеснить остальные способы верстки, однако уже в ближайшее время следует ожидать его повсеместное применение для решения огромного количества задач.