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.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
Что мы тут видим:
– блоки стали вести себя свободней – их ширина теперь равняется контенту
– блоки, которые не влазят, переносятся на другую строку
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-элементов рассмотрим в следующей заметке
Немає коментарів.