Метод позиционирования элементов Flexbox
Спецификация Flexbox (Flexible Box Layout Module) – это метод позиционирования элементов в горизонтальном или вертикальном направлениях.
Flexbox объединяет в себе набор свойств для родительского flex-контейнера и для дочерних flex-элементов.
Чтобы элемент стал flex-контейнером, ему надо присвоить display: flex; или display: inline-flex; (блочный или строчный соответственно).
Внутри flex-контейнера создаются две оси: главная и перпендикулярная ей поперечная. Сначала flex-элементы выстраиваются по главной оси, а потом уже по поперечной.
Свойства flex-контейнера
- row – слева направо (по умолчанию);
- row-reverse – справа налево;
- column – сверху вниз;
- column-reverse – снизу вверх.
- nowrap – flex-элементы выстраиваются в одну строку, если не помещаются в контейнер, то выходят за его границы (по умолчанию);
- wrap – flex-элементы выстраиваются в несколько строк, если не помещаются в одну;
- wrap-reverse – похоже на wrap, но перенос происходит снизу вверх.
- flex-start – flex-элементы прижимаются к началу главной оси (по умолчанию);
- flex-end – flex-элементы прижимаются к концу главной оси;
- center – flex-элементы выравниваются по центру главной оси;
- space-between – flex-элементы распределяются вдоль главной оси, при этом первый элемент прижат к началу оси, а последний — к концу;
- space-around – flex-элементы распределяются вдоль главной оси, при этом свободное пространство делится поровну между элементами. Но стоит отметить, что промежутки суммируются и расстояние между элементами в два раза больше, чем расстояние между краями контейнера и крайними элементами.
- flex-start – flex-элементы прижимаются к началу поперечной оси (по умолчанию);
- flex-end – flex-элементы прижимаются к концу поперечной оси;
- center – flex-элементы выравниваются по центру поперечной оси;
- baseline – flex-элементы выравниваются по своей базовой линии. Базовая линия – это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, таких как у букв «д», «р», «ц», «щ»;
- stretch – flex-элементы растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.
- 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.