Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
PHP Поиск
Метод позиционирования элементов Flexbox
Спецификация Flexbox (Flexible Box Layout Module) – это метод позиционирования элементов в горизонтальном или вертикальном направлениях.
Flexbox объединяет в себе набор свойств для родительского flex-контейнера и для дочерних flex-элементов.
Чтобы элемент стал flex-контейнером, ему надо присвоить display: flex; или display: inline-flex; (блочный или строчный соответственно).
Внутри flex-контейнера создаются две оси: главная и перпендикулярная ей поперечная. Сначала flex-элементы выстраиваются по главной оси, а потом уже по поперечной.
Свойства flex-контейнера |
|
flex-direction |
Определяет направление главной оси. Возможные значения:
|
flex-wrap |
Определяет многострочность контейнера. Возможные значения:
|
flex-flow |
Определяет сразу два параметра: flex-direction и flex-wrap. Например, flex-flow: column wrap; |
justify-content |
Определяет выравнивание элементов по главной оси. Возможные значения:
|
align-items |
Определяет выравнивание элементов по поперечной оси. Возможные значения:
|
align-content |
Определяет выравнивание целых строк flex-элементов по поперечной оси. Возможные значения:
Это свойство не работает для однострочного flex-контейнера. |
Свойства 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-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-элемента. Возможные значения:
|
Особенности применения 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 современными браузерами достаточно хороша, за исключением IE11 :(
Читать дальше: Адаптивная верстка