Flexbox-1. Flex-контейнер и его свойства. (много текста с примерами)

Технология Flexbox сама по себе не нова. Появилась уже лет как десять назад. Но вот только последнее время стала повсеместно поддерживаться браузерами, так что время перехода на верстку с помощью flex’ов уже пришло. Более того, flexbox’ы уже активно применяется, и не знать их становиться моветоном. Поэтому я подготовил шпаргалку, разъясняющую основные моменты.

В статье живой код с Codepen. Чтобы отображение результата в нем выглядело так, как я задумал для иллюстрации свойств flexbox, читайте на настольком ПК с размером экрана от 1200px, иначе некоторые примеры будут не очевидны из-за того, что контейнер станет уже.

1. Создаем flex-контейнер

Для того, чтобы блоки вели себя как flex-элементы, мы должны обернуть их в контейнер, которому назначается css-свойство display: flex. В результате, дочерние элементы поведут себя как flex-блоки.
Пример:

See the Pen flexbox-1 by molodezky (@molodezky) on CodePen.

Что мы тут видим:

• блоки перестали занимать всю ширину, как это должно быть для обычного div
• блоки схлопнулись по контенту в них и прижались к левому краю

Какие же свойства заставляют их так себя вести?

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

Прежде всего это flex-direction – направление главной оси, оси вдоль которой выстраиваются блоки. Может иметь значения – row (по умолчанию) и column.
Другими словами, назначив flex-direction значение row мы выстраиваем блоки по горизонтали слева направо. Назначив column – сверху вниз.
Также есть еще два значения – row-reverse и column-reverse, которые выстраивают блоки в обратном направлении соответственно.
Пример, в котором я прописал flex-direction: column:

See the Pen flexbox-2 by molodezky (@molodezky) on CodePen.

3. flex-wrap – перенос flex-элементов

В примерах выше у нас контент в блоках – один символ. Добавим больше блоков и текста в них, и посмотрим, как себя поведут блоки:

See the Pen flexbox-3 by molodezky (@molodezky) on CodePen.

Что мы тут видим:

• блоки заняли всю ширину контейнера. Это произошло потому, что их распер контент
• все восемь блоков стоят в одну строку
• появилась горизонтальная прокрутка, т.к. контент не дает сжиматься блокам, и они не влазят в отведенную ширину, но все равно не переходят на вторую строку

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

• flex-wrap: nowrap (по умолчанию), т.е. без переносов как в начальном примере
• flex-wrap: wrap – flex-элементы переносятся
  

  See the Pen flexbox-4 by molodezky (@molodezky) on CodePen.

  
  Что мы тут видим:
  – блоки стали вести себя свободней – их ширина теперь равняется контенту
  – блоки, которые не влазят, переносятся на другую строку

flex-wrap: wrap-reverse – flex-элементы переносятся в обратном порядке, т.е. строки, которые перенеслись становятся перед предыдущими строками

See the Pen flexbox-15 by molodezky (@molodezky) on CodePen.

Два последних свойства – flex-direction и flex-wrap можно объединить в одну сокращенную запись через свойство flex-flow.

• flex-flow: <'flex-direction'> || <'flex-wrap'>

4. justify-content – распределение flex-элементов по главной оси

Теперь рассмотрим, как можно выравнять flex-элементы по главной оси. Для этого существует свойство justify-content. Оно имееет довольно много значений:

• justify-content: flex-start (по умолчанию) – элементы сдвигаются к началу строки

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

• justify-content: flex-end – элементы сдвигаются к концу строки
  

  See the Pen flexbox-5 by molodezky (@molodezky) on CodePen.

• justify-content: center – элементы выравниваются по центру строки
  

  See the Pen flexbox-7 by molodezky (@molodezky) on CodePen.

• justify-content: space-between – элементы распределяются равномерно (первый элемент в начале строки, последний — в конце)
  

  See the Pen flexbox-6 by molodezky (@molodezky) on CodePen.

• justify-content: space-around – элементы распределяются равномерно с равным расстоянием между собой и границами строки
  

  See the Pen flexbox-8 by molodezky (@molodezky) on CodePen.

5. align-content и align-items – распределение строк по поперечной оси и распределение самих flex-элементов в строке по поперечной оси

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

Внимание! В однострочном flexbox-контейнере align-content работать не будет.

Может иметь значения:

• align-content: flex-start – строки выравниваются относительно начала контейнера.
  

  See the Pen flexbox-9 by molodezky (@molodezky) on CodePen.

• align-content: flex-end – строки выравниваются относительно конца контейнера.
  

  See the Pen flexbox-10 by molodezky (@molodezky) on CodePen.

• align-content: center – строки выравниваются по центру поперечной оси.
  

  See the Pen flexbox-11 by molodezky (@molodezky) on CodePen.

• align-content: space-between – строки распределяются равномерно, при этом первая строка прижата к началу, последняя — к концу.
  

  See the Pen flexbox-12 by molodezky (@molodezky) on CodePen.

• align-content: space-around – строки распределяются равномерно с равным расстоянием между собой.
  

  See the Pen flexbox-13 by molodezky (@molodezky) on CodePen.

• align-content: stretch (по умолчанию) – строки растягиваются занимая все доступное пространство.
  

  See the Pen flexbox-14 by molodezky (@molodezky) on CodePen.

Теперь рассмотрим выравнивание flex-элементов вдоль поперечной оси в самой строке с помощью свойства align-items:

• align-items: flex-start – flex-элементы прижимаются к началу строки.
  

  See the Pen flexbox-16 by molodezky (@molodezky) on CodePen.

  Для наглядности flex-элементам я сделал разный по объему контент и добавил свойство flex: 0 0 100px. Разбор этого свойства сделаем в следующей статье. Скажу только, что тем самым мы фиксируем их ширину в 100px.

• align-items: flex-end – flex-элементы прижимаются к концу строки.
  

  See the Pen flexbox-17 by molodezky (@molodezky) on CodePen.

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

• align-items: center – flex-элементы выравниваются по центру поперечной оси.
  

  See the Pen flexbox-18 by molodezky (@molodezky) on CodePen.

• align-items: baseline – flex-элементы выравниваются по базовой линии текста.
  

  See the Pen flexbox-19 by molodezky (@molodezky) on CodePen.

• align-items: stretch (по умолчанию) – flex-элементы растягиваются заполняя полностью строку.
  

  See the Pen flexbox-20 by molodezky (@molodezky) on CodePen.

Свойства самих flex-элементов рассмотрим в следующей заметке