Flexbox model
Что такой flexbox
Flexbox состоит из flex-контейнера - родительский блок. И flex-блоки, которые являются дочерними элементами данного контейнера.
Чтобы определить flex-контейнер достаточно прописать ему
display: flex || inline-flex
Все дочерние элементы автоматически становятся flex-блоками
Flexbox это модель поведения лэйаута, которая дает возможность выравнивать элементы и распределять пространство между ними даже при неизвестных/динамических размерах этих элементов.
Как инициализировать flex
display: flex;
Прописав родительскому блоку display: flex, все дочерние элементы сразу перестают использовать свою изначальную блочную модель и становятся flex-блоками
Свойства flex-контейнера
Как только элемент стал flex-контейнером к нему можно применять следующие свойства:
flex-direction - направление главной оси
justify-content - выравнивание по главной оси
align-items - выравнивание по поперечной оси
Многострочность:
flex-wrap - перенос flex-элементов
flex-flow - сокращенная запись flex-direction + flex-wrap
align-content - выравнивание строк вдоль поперечной оси в многострочном режиме.
flex-direction
При инициализации flex-контейнера в данном блоке появлется 2 оси: главная и поперечная.
По умолчанию поток элементов идет слева на право, сверху вниз. За такое поведение отвечает значение flex-direction: row;
Направление осей и соответственно поток дочерних элементов можно изменить прописав flex-direction: column.
Доступные значения: row || row-reverse || column || column-reverse
flex-direction
(пример использования)
justify-content
Данное свойство выравнивает элементы вдоль главной оси.
При инициализации flex-контейнера все элементы выровнены по левому краю, за такое поведение отвечает значение justify-content: flex-start.
justify-content принимает такие значения:
flex-start (по умолчанию) : прижать к началу главной оси
flex-end: прижать к концу главной оси
center: выравнять по центру главной оси
space-between: распределяет элементы таким образом, чтобы все свободное пространство было разделено поровну между элементами
space-around: распределяет элементы таким образом, чтобы все свободное пространство было разделено поровну вокруг элементов
justify-content
(пример использования)
Выровнять пункты меню по всему контейнеру
align-items
Данное свойство выравнивает элементы вдоль поперечной оси.
При инициализации flex-контейнера все элементы растянуты на всю высоту flex-контейнера, за такое поведение отвечает значение align-items: stretch (что-то вроде ).
align-items принимает такие значения:
flex-start (по умолчанию) : прижать к началу поперечной оси
flex-end: прижать к концу поперечной оси
center: выравнять по центру поперечной оси
baseline: выравнять блоки по базовой линии первой строки текста
stretch : растянуть блоки, занимая все доступное место по поперечной оси
align-items
(пример использования)
flex-end
stretch
flex-wrap
При инициализации flex-контейнера независимо от количества дочерних элементов, все они будут размещаться в одну строку. За такое поведение отвечает значение
flex-wrap: nowrap.
Такое поведение можно легко переопределить прописав новое значение:
flex-wrap: wrap; Т.е. теперь все элемент, которые не помещаются в одну строку будут переноситься на новую.
Также еще есть третье значение -
wrap-reverse, которое также включает режим переноса, но при этом переворачивает поперечную ось и соответственно направление переноса (снизу вверх)
flex-flow
Данное свойство является сокращенной записью двух свойств -
flex-direction + flex-wrap. (аналогично border и border-width, border-style, border-color);
.flex-block{
flex-direcrion: column;
flex-wrap: wrap;
}
/* Равнозначно */
.flex-block{
flex-flow: column wrap;
}align-content
Данное свойство определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера.
Данное свойство принимает такие значения
flex-start: прижать ряды к началу flex-контейнера.
flex-end: прижать ряды к концу flex-контейнера
center: ряды блоков находятся в центре flex-контейнера
space-between: первый ряд блоков располагается в начале flex-контейнера, последний ряд блоков блок – в конце, все остальные ряды равномерно распределены в оставшемся пространстве. (аналогично justify-content)
space-around: ряды блоков равномерно распределены в от начала до конца flex-контейнера, разделяя все свободное пространство поровну. (аналогично justify-content)
stretch (значение по умолчанию): Ряды блоков растянуты, дабы занять все имеющееся пространство.
Свойства flex-блока
Как только блок стал flex-блоком к нему можно применять следующие свойства:
flex-basis - базовый размер отдельно взятого flex-блока
flex-grow - “жадность” или возможность роста отдельно взятого flex-блока
flex-shrink - “сжимаемость” отдельно взятого flex-блока
flex - короткая запись для свойств flex-grow + flex-shrink + flex-basis
align-self - выравнивание отдельно взятого flex-блока по поперечной оси.
order - расположение в потоке отдельно взятого flex-блока внутри flex-контейнера.
flex-basis
Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах (flex-grow, flex-shrink). Может быть задан в любых единицах измерения длинны (px, em, %, …) или auto(по умолчанию). Если задан как auto – за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.
flex-grow
Относительное свойство, которое определяет на сколько данный элемент может растягиваться по отношению к соседним. По умолчанию значение установлено в 0, Т.е. блок не будет растягиваться не смотря на то, сколько у него есть свободного пространства.
Значения данного свойства может быть равно нулю или любому положительному числу.
При установки значения отменным от нуля, блок сразу же начнет растягиваться на все свободное пространство.
flex-grow
Значение является относительным. Т.е. если у всех блоков задано одинаковое значение, они будут растягиваться равномерно. Но как только одному из блоков задать значение меньше или больше от тут же изменит свое поведение относительно других блоков
Как это работает
Берутся все элементы в одном ряду, суммируются значения flex-grow 1 + 1 + 3 + 1 + 1 +1 = 8, контейнер разбивается на 8 частей, и каждому элементу выделяется только места, сколько у него прописано во flex-grow. Своего рода подобие сетки
flex-shrink
Определяет, насколько flex-блок будет уменьшаться относительно соседних эдементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен 1.
Одно из часто используемых значений - 0 - отключить сжатие
flex
Короткая запись для свойств flex-grow, flex-shrink и flex-basis
.flex-block{
flex-grow:12;
flex-shrink:3;
flex basis: 30em;
}
/* Равнозначно */
.flex-block{
flex: 12 3 30em;
}Flex также может принимать несколько коротких значений, который хранят в себе определенные значений всех трех свойств:
flex: default = flex: 0 1 auto;
flex: none = flex: 0 0 auto;
flex: auto = flex: 1 1 auto;
flex: _число_ = flex: _число_ 1 0;
align-self
Данное свойство дает возможность переопределять свойство flex-контейнера align-items для отдельного flex-блока.
Принимает те же самые значение что из align-items:
flex-start: flex-блок прижат к началу поперечной оси
flex-end: flex-блок прижат к концу поперечной оси
center: flex-блок располагаются в центре поперечной оси
baseline: flex-блок выравнен по baseline
stretch: flex-блок растянут, чтобы занять все доступное место по поперечной оси
order
Данное свойство позволяет переопределить порядок flex-блоков в контейнере относительно потока.
По-умолчанию у всех flex-блоков значение этого свойства равно нулю и их порядок совпадает с порядком вывода в html
Данное свойство определяет не конкретную позицию блока в потоке, а его вес/приоритет по отношению к остальным.
В WP во многих местах используется схожий подход: расположение пункта меню в админке, описание какого-либо экшена и присвоение ему приоритета срабатывания...
В качестве значения order принимает любое числовое значение, как положительное, так и отрицательное
order
(пример использования)
с помощью данного свойства можно легко управлять порядком элементов на респонсиве, например при работе с сайдбаром
margin: auto
Во flexbox модели есть интересно поведение связанное с использование margin в значении auto.
Данное поведение заключается в том, что если у flex-блока задан margin в значении auto для любой из сторон (top, right, bottom, left), то этот блок заберет все свободное пространство по главной оси и отодвинется от всех остальных блоков.
Например создав навигацию можно распределить элементы следующим образом:
li:nth-child(1) {
margin-right: auto;
}
либо применив маргин авто по обеим сторонам свободное пространство распределиться по левую и правую сторону от блока
margin: auto
(пример использования)
Навигация
Стики футер
