Как работает Flexbox? (часть 1)

Что такое Flexbox?

Модуль Flexbox (flexible box — «гибкий блок») – это удобный и упрощенный способ вёрстки. Он позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, а также грамотно распределять свободное место между элементами на странице.

В чем главная задумка «гибкого блока»?

Идея flex-вёрстки в том, чтобы наделить контейнер способностью изменять ширину, высоту и порядок своих элементов для наилучшего заполнения пространства и/или поддержки всех видов дисплеев и размеров экранов. Для предотвращения выхода за границы flex-контейнер может сжимать элементы, а чтобы предотвратить выход за границы, наоборот, растягивать.

Основы, термины и обозначения

Flexbox — объединяет в себе множество свойств, так как является полноценным модулем. Одни должны применяться к родительскому элементу, который называют гибкий контейнер (Flex Container), в то время как другие свойства применяются только к дочерним гибким элементам (Flex Item).

В основном элементы в flex-лейауте распределяются либо вдоль главной оси (от main-start до main-end), либо вдоль поперечной оси (от cross-start до cross-end). Разберем значение осей и основных элементов подробнее.

Главная ось (main axis) проходит в том направлении, вдоль которого расположены flex-элементы. Стоит обратить внимание, что ей необязательно быть горизонтальной, все зависит от свойства flex-direction, о котором вы узнаете немного позже.

main-start/main-end - flex-элемент, раcполагающиеся в контейнере от позиции main-start до позиции main-end.

main size - ширина или высота flex-элемента, которая зависит от выбранной основной величины. Основная величина, в свою очередь, может быть или шириной, или высотой элемента.

Поперечная ось (сross axis)проходит перпендикулярно Flex элементам. Направление этой оси зависит от направления главной. Начало и конец поперечной оси называют cross start и cross end.

cross size- ширина или высота flex-элемента в зависимости от выбранной размерности равняется этой величине.

Свойства родительских элементов

#display

Это свойство создаёт сам flex-контейнер, инлайновый или блочный, в зависимости от заданного значения. Также свойство подключает flex-контекст для всех потомков.

#flex-direction

Устанавливает направление главной оси (main-axis).

Основные значения:
row — положение слева направо.
row-reverse — элементы располагаются справа налево.
column — то же самое, что и row, только сверху вниз.
column-reverse — то же самое, что и row-reverse, но снизу вверх.

#justify-content

Свойство определяет выравнивание вдоль главной оси.

Основные значения:

• flex-start(состояние по умолчанию) – блоки прижаты к началу главной оси.
• flex-end – блоки прижаты к концу главной оси.

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

#align-items

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

• flex-start — блоки размещаются к началу поперечной оси.
• flex-end—блоки размещаются к концу поперечной оси.

• center — блоки размещаются к центру поперечной оси.

• stretch — состояние по умолчанию, при котором элементы заполняют контейнер, с учетом min-width и max-width.
  

• baseline — блоки выравниваются по базовой линии.
  

#flex-wrap

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

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

#flex-flow

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

#align-content

Свойство align-content определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера. align-content работает только в многострочном режиме!

Основные значения align-content:

• flex-start – ряды блоков прижаты к началу flex-контейнера.
• flex-end – ряды блоков прижаты к концу flex-контейнера.

• cente – ряды блоков находятся в центре flex-контейнера.
• stretch(значение по умолчанию) – Ряды блоков растянуты, дабы занять все имеющееся пространство

• space-between – первый ряд блоков располагается вначале flex-контейнера, последний ряд блоков блок – в конце, все остальные ряды равномерно распределены в оставшемся пространстве.
• space-around – ряды блоков равномерно распределены от начала до конца flex-контейнера, разделяя все свободное пространство поровну.

В этой статье вы познакомились с модулем гибкой верстки – Flexbox и свойствах его родительских элементов. Во второй части статьи мы рассмотрим свойства дочерних элементов Flexbox и разберем их основные значения.