Разбираемся с флексбоксами CSS

14 мая 2019

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

Продающие лендинги

Не помню точно в каком году появилась блочная верстка. Я перешел на нее с табличной примерно в 2006. Не смотря на кучу новых семантических тегов HTML5 и новых свойств CSS3, подход к верстке в целом особо не менялся с годами — в основе всегда были позиционированные блоки. Сегодня блочная верстка практически умерла, как и когда-то табличная. На смену ей пришли и плотно заняли свое место флексбоксы и гриды (про гриды я расскажу отдельно). И это не просто очередные новомодные свойства CSS. Флексбоксы — это требование времени, вызванное необходимостью упрощения адаптивной верстки.

Я не ставлю целью сделать очередной справочник по флексам. Разберу несколько рабочих примеров, расскажу про основные свойства для тех, кто еще не знаком с флексами. А дальше каждый решит сам, нужно ему это или нет. Под каждым примером есть прямая ссылка на описание свойства в официальном источнике — сайте консорциума всемирной паутины.

Что такое флексбокс

Немного теории.

Flexbox (CSS3 Flexible Box) — режим разметки, созданный для более предсказуемого упорядочения элементов на страницах, адаптированных под различные размеры экранов и устройств. В большинстве случаях флексбоксы лучше блочной модели разметки, поскольку не использует обтекания (floats), не схлопывают отступления flex-контейнера и его содержимого (margin collapse).

Однозначно, флексбоксы проще блоков — дочерние элементы внутри флексбокса могут размещаться в любом направлении, могут менять размер, чтобы адаптироваться к различным размерам дисплея. Более простое позиционирование элементов, независимость порядка отображения элементов от его положения в коде делает код более чистым.

Концепция флексбокса заключается в возможности изменения высоты и/или ширины его элементов, чтобы лучше заполнять пространство любого дисплея. Флекс-контейнер увеличивает элементы, чтобы заполнить доступное пространство или уменьшает чтобы предотвратить перекрытие.

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

Основные свойства флексбоксов

1. Порядок и ориентация

2. Позиционирование

3. Гибкость

Display

Флексбокс может быть блочным (flex) или строковым (inline-flex). Работает это в привычном для CSS виде.

Подробнее на w3.org

Flex-direction

Направление оси контейнера может быть четырех видов:

  1. row — строка (по умолчанию);
  2. row-reverse — строка в обратном порядке;
  3. column — колонка;
  4. column-reverse — колонка в обратном порядке.
Подробнее на w3.org

Flex-wrap

Управление переносом элементов.

  1. nowrap (по умолчанию) — элементы располагаются в один ряд или в одну колонку в зависимости от заданного flex-direction;
  2. wrap — элементы переносятся на следующий ряд;
  3. wrap-reverse — элементы переносятся на следующий ряд в обратном направлении.
Подробнее на w3.org

Flex-flow

Сокращение свойств flex-direction и flex-wrap, которые определяют основную и поперечные оси контейнера. По-умолчанию row nowrap.

Подробнее на w3.org

Order

Управление порядком элементов.

Например, чтобы выдвинуть вперед всех четвертый элемент, зададим ему order=-1.

Подробнее на w3.org

Justify-content

Управление выравниванием по главной оси.

  1. flex-start — выравнивание от начала главной оси (по умолчанию); 
  2. flex-end — выравнивание от конца главной оси; 
  3. center — выравнивание по центру главной оси; 
  4. space-between — выравнивание по главной оси, распределяя свободное пространство между собой; 
  5. space-around — выравнивание по главной оси, распределяя свободное пространство вокруг себя.
  6. space-evenly — как space-around, только расстояние у крайних элементов до краев контейнера будет равным расстоянию между элементами.
Подробнее на w3.org

Align-items

Выравнивание элементов по поперечной оси внутри ряда.

  1. flex-start — от начала поперечной оси;
  2. flex-end — от конца поперечной оси;
  3. center — по центру;
  4. baseline — по базовой линии;
  5. stretch — по всему пространству поперечной оси (по умолчанию).
Подробнее на w3.org

Align-self

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

  1. auto — используется align-items родительского элемента (по умолчанию);
  2. flex-start — от начала поперечной оси;
  3. flex-end — от конца поперечной оси;
  4. center — по центру;
  5. baseline — по базовой линии;
  6. stretch — растягивается, занимая все пространство по высоте.
Подробнее на w3.org

Align-content

Выравнивание внутри многострочного контейнера.

  1. flex-start — от начала главной оси;
  2. flex-end — от конца главной оси;
  3. center — по центру главной оси;
  4. space-between — по главной оси, распределяя свободное место между собой;
  5. space-around — по главной оси, распределяя свободное место вокруг себя;
  6. stretch — растягиваются, заполняя всю высоту (по умолчанию).
Подробнее на w3.org

Flex-grow

Коэффициент увеличения элемента при наличии свободного пространства в контейнере.

По-умолчанию flex-grow: 0.

Подробнее на w3.org

Flex-shrink

Коэффициент уменьшения элемента при отсутствии свободного пространства в контейнере.

Подробнее на w3.org

Flex-basis

Базовая ширина элемента для распределения свободного пространства контейнера.

В примере ширина четвертого элемента равна 50%, пятого — в зависимости от ширины контента.

Подробнее на w3.org

В заключение

Вот в общем-то и вся основная информация по флексам. Этих знаний должно хватить для верстки любых макетов. Как видим, ничего сложного нет. Наоборот, позиционирование элементов сильно упрощается, экономит массу времени. Сами страницы получаются легкими, гибкими, быстрыми и адаптивными. На данный момент все популярные современные браузеры поддерживают флексбоксы.

Поддержка флексбоксов браузерами на 2019 год
Поддержка флексбоксов браузерами на 2019 год

Проблемы по старой традиции наблюдаются только у IE. Но и там при сильной необходимости можно найти решения.

Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.

INNERSTAT

Подпишитесь на рассылку
Один раз в месяц все новые материалы в одном письме

Лучшее за неделю
Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

Добавить комментарий

Услуги фрилансеров по фиксированной цене — 500 р.
Подробнее