Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Метод позиционирования элементов 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 осуществляется всеми современными браузерами.
Читать дальше: Грид-разметка
.
Прокомментировать/Отблагодарить