Метод позиционирования элементов Flexbox

Спецификация Flexbox (Flexible Box Layout Module) – это метод позиционирования элементов в горизонтальном или вертикальном направлениях.

Flexbox объединяет в себе набор свойств для родительского flex-контейнера и для дочерних flex-элементов.

Чтобы элемент стал flex-контейнером, ему надо присвоить display: flex; или display: inline-flex; (блочный или строчный соответственно).

Внутри flex-контейнера создаются две оси: главная и перпендикулярная ей поперечная. Сначала flex-элементы выстраиваются по главной оси, а потом уже по поперечной.

Свойства flex-контейнера

flex-direction

Определяет направление главной оси. Возможные значения:

• row – слева направо (по умолчанию);
• row-reverse – справа налево;
• column – сверху вниз;
• column-reverse – снизу вверх.

flex-wrap

Определяет многострочность контейнера. Возможные значения:

• nowrap – flex-элементы выстраиваются в одну строку, если не помещаются в контейнер, то выходят за его границы (по умолчанию);
• wrap – flex-элементы выстраиваются в несколько строк, если не помещаются в одну;
• wrap-reverse – похоже на wrap, но перенос происходит снизу вверх.

flex-flow

Определяет сразу два параметра: flex-direction и flex-wrap.
Например, flex-flow: column wrap;

justify-content

Определяет выравнивание элементов по главной оси. Возможные значения:

• flex-start – flex-элементы прижимаются к началу главной оси (по умолчанию);
• flex-end – flex-элементы прижимаются к концу главной оси;
• center – flex-элементы выравниваются по центру главной оси;
• space-between – flex-элементы распределяются вдоль главной оси, при этом первый элемент прижат к началу оси, а последний - к концу;
• space-around – flex-элементы распределяются вдоль главной оси, при этом свободное пространство делится поровну между элементами. Но стоит отметить, что промежутки суммируются и расстояние между элементами в два раза больше, чем расстояние между краями контейнера и крайними элементами.

Пример

align-items

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

• flex-start – flex-элементы прижимаются к началу поперечной оси (по умолчанию);
• flex-end – flex-элементы прижимаются к концу поперечной оси;
• center – flex-элементы выравниваются по центру поперечной оси;
• baseline – flex-элементы выравниваются по своей базовой линии. Базовая линия – это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, таких как у букв «д», «р», «ц», «щ»;
• stretch – flex-элементы растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.

align-content

Определяет выравнивание целых строк flex-элементов по поперечной оси. Возможные значения:

• flex-start – строки flex-элементов прижимаются к началу поперечной оси (по умолчанию);
• flex-end – строки flex-элементов прижимаются к концу поперечной оси;
• center – fстроки flex-элементов выравниваются по центру поперечной оси;
• space-between – строки flex-элементов распределяются вдоль поперечной оси, при этом первая строка прижата к началу оси, а последняя - к концу;
• space-around – строки flex-элементов распределяются вдоль поперечной оси, при этом свободное пространство делится поровну между строками. Но стоит отметить, что промежутки суммируются и расстояние между строками в два раза больше, чем расстояние между краями контейнера и крайними строками.
• stretch – строки flex-элементов растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.

Пример

Это свойство не работает для однострочного flex-контейнера.

row-gap

Определяет промежутки между строками flex-элементов, т.е. вертикальные промежутки. Задается в px, %, em и остальных единицах измерения.
Например: row-gap: 24px;

column-gap

Определяет промежутки между столбцами flex-элементов, т.е. горизонтальные промежутки. Задается в px, %, em и остальных единицах измерения.
Например: column-gap: 16px;

gap

Определяет промежутки между flex-элементами по вертикали и горизонтали. Задается в px, %, em и остальных единицах измерения. Это короткая запись, объединяющая свойства row-gap и column-gap, поэтому может иметь одно или два значения.
Например: gap: 24px 16px;

Cвойства row-gap, column-gap, gap появились в 2021 году. Поддержка браузерами.

Свойства flex-элементов

order

Определяет порядок следования отдельно взятого flex-элемента внутри flex-контейнера. Задается целым числом. По умолчанию равно 0, тогда элементы следуют друг за другом в порядке естественного потока. Значение order задает вес позиции элемента в последовательности, а не абсолютную позицию.
Пример

flex-basis

Определяет базовый размер flex-элемента перед распределением пространства в контейнере. Может быть задан в px, %, em и остальных единицах измерения. По сути это своего рода отправная точка, относительно которой происходит растягивание или сжатие элемента. Значение по умолчанию – auto, при этом размер элемента зависит от размера внутреннего контента.

В спецификации CSS Flexible Box Layout Module Level 1 приведена наглядная диаграмма для трех flex-элементов со значениями flex-grow 1, 1, 2 соответственно:

Пример flex-basis: 0
Пример flex-basis: auto

flex-grow

Определяет, какую долю свободного места внутри контейнера добавит к своему базовому размеру flex-элемент. Задается целым числом, служащим пропорцией. По умолчанию равно 0. Если у всех элементов flex-grow: 1, то все они будут одинакового размера. Если одному flex-элементу задать значение 2, то к его базовому размеру добавится в два раза больше, чем к другим.
Пример

flex-shrink

Определяет, на сколько в случае недостатка места будет уменьшаться flex-элемент относительно уменьшения соседних элементов внутри flex-контейнера. Задается целым числом, служащим пропорцией. По умолчанию равно 1. Если одному flex-элементу задать значение flex-shrink: 2, то из его базового размера вычтется в два раза больше, чем из других, если контейнер меньше, чем сумма базовых размеров входящих в него элементов.
Пример

flex

Определяет сразу три параметра: flex-grow, flex-shrink, flex-basis.
Например, flex: 1 1 200px;

align-self

Переопределяет выравнивание, заданное по умолчанию или в align-items, для конкретного flex-элемента. Возможные значения:

• flex-start – flex-элемент прижимается к началу поперечной оси (по умолчанию);
• flex-end – flex-элемент прижимается к концу поперечной оси;
• center – flex-элемент выравнивается по центру поперечной оси;
• baseline – flex-элемент выравнивается по базовой линии;
• stretch – flex-элементы растягивается, занимая все доступное место по поперечной оси. Но если задана высота, то stretch будет проигнорирован.

Пример

Особенности применения Flexbox на практике

1. Выравнивание по правому краю

Чтобы прижать заголовок сайта влево, а номер телефона вправо, то заголовку надо задать flex: 1.

.header {
    display: flex;
}
.header .title {
    flex: 1;
}

Если же по какой-то причине тянуть заголовок на всю ширину нельзя, то блоку с номером телефона надо задать margin-left: auto.

.header {
    display: flex;
}
.header .phone {
    margin-left: auto;
}

Для наглядности блокам добавлены пунктирные границы.

2. Сжатие блоков с длинными словами

Есть блок, состоящий из названия услуги и номера телефона, по которому ее можно заказать. Описание услуги использует столько пространства, сколько может, а затем переходит на следующую строку.

.serv {
    display: flex;
}
.serv .description {
    font-size: 30px;
}
.serv .call {
    margin-left: auto;
    width: 120px;
    text-align: center;
    align-self: center;
}

Теперь в описании услуги появляется длинное слово.

Красной границей обозначена ширина смартфона, и если переполнение скрыто (overflow: hidden), то кнопку "Оставить заявку" никто не увидит и заказать услугу не сможет.

Дело в том, что минимальная ширина (min-width) блока description по умолчанию имеет значение auto, что в данном случае равняется ширине слова "пенополистиролбетонных". Значит, flex-элемент не может быть уже, чем это слово.

Решение данной проблемы – указать для flex-элемента нулевую минимальную ширину (min-width: 0). Теперь элемент может быть уже, чем его содержимое. А длинное слово можно просто перенести.

.serv {
    display: flex;
}
.serv .description {
    font-size: 30px;
    min-width: 0;
    word-wrap: break-word;
}
.serv .call {
    margin-left: auto;
    width: 120px;
    text-align: center;
    align-self: center;
}

3. Гарантированная ширина

Кнопка "Оставить заявку" по ширине совсем не 120px, как было указано в стилях. Дело в том, что по умолчанию flex-элемент сжимается, если места недостаточно.

Следующие три комбинации разработчики Flexbox посчитали наиболее часто используемыми и присвоили им ключевые слова:

flex: 0 1 auto

Элемент сжимается, если места не хватает, но не тянется шире, чем ему надо.
Соответствует flex: initial и является значением по умолчанию.

flex: 1 1 auto

Элемент сжимается, если места не хватает и тянется для заполнения всего доступного пространства. Соответствует flex: auto.

flex: 0 0 auto

Элемент не меняет свои размеры. Соответствует flex: none.

Итак, чтобы ширина кнопки "Оставить заявку" равнялась именно 120px, надо ей добавить flex: none.

.serv {
    display: flex;
}
.serv .description {
    font-size: 30px;
    min-width: 0;
    word-wrap: break-word;
}
.serv .call {
    margin-left: auto;
    width: 120px;
    flex: none;
    text-align: center;
    align-self: center;
}

4. Несколько полезных замечаний

Надо не забывать, что:

• вертикальное выравнивание (vertical-align) не влияет на flex-элемент,
• для flex-элементов следует полностью избегать использования margin или padding в %,
• отступы (margin) соседних flex-элементов никогда не объединяются,
• z-index на flex-элементе работает даже при position: static,
• для вертикального выравнивания flex-элементов с различным размером шрифта лучше установить align-items: baseline.

5. В качестве заключения...

Поддержка Flexbox осуществляется всеми современными браузерами.

Читать дальше: Грид-разметка