Flexbox. Основные моменты технологии | Блог веб-разработчика Евгения Молодецкого

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

28.10.2018 | Написал

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

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

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

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

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


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

  • блоки перестали занимать всю ширину, как это должно быть для обычного 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.light

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

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

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


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

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

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

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

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


    Что мы тут видим:
    — блоки стали вести себя свободней — их ширина теперь равняется контенту
    — блоки, которые не влазят, переносятся на другую строку
  • flex-wrap: wrap-reverse — flex-элементы переносятся в обратном порядке, т.е. строки, которые перенеслись становятся перед предыдущими строками

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

  • Два последних свойства — 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.light

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

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

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

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

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

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

    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.light

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Метки: ,
    Комментарии читателей статьи "Flexbox-1. Flex-контейнер и его свойства. (много текста с примерами)"

    Нет комментариев.

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

    Ваш e-mail не будет опубликован.

    Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.