Послание № 11
Flexbox
Flexbox по праву можно назвать удачной попыткой решения огромного спектра проблем при построении сеток в css. Но прежде чем перейти к его описанию, давайте выясним, что же не так со способами верстки, которыми мы пользуемся сейчас?
Мы уже знаем несколько способов размещать блоки на странице так как нам удобно, но они очень ограничены и требуют множества вычислений и особой магии при выравнивании некоторых блоков. Flexbox – это новый инструмент, который решает огромное количество задач, которые раньше решались с трудом.
Случилось это потому, что html и css развивались эволюционно. В начале веб-страницы были похожи на однопоточные текстовые документы, чуть позже разбиение страницы на блоки делали таблицами, а после добавились еще и приемы с inline-block. В итоге мы получили в наследство смесь всех этих приемов, используемую для построения сеток.
Основные преимущества flexbox
· Все блоки очень легко делаются “резиновым”. Элементы могут сжиматься и растягиваться по заданным правилам и занимая нужное пространство.
· Выравнивание по вертикали и горизонтали, базовой линии работает отлично.
· Расположение элементов в html не имеет решающего значения. Его можно поменять в CSS.
· Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место.
· Синтаксис CSS правил очень прост и осваивается довольно быстро.
Начинаем погружение
Flexbox определяет набор CSS свойств для контейнера (flex-контейнер) и его дочерних элементов (flex-блоков). Первое, что нужно сделать – это указать контейнеру display:flex или display:inline-flex.
Основные свойства flex-контейнера. Главная и поперечная ось.
Одним из основных понятий в fleхbox являются оси.
|
|
Главной осью flex-контейнера является направление, в соответствии с которым располагаются все его дочерние элементы. Она по умолчанию располагается слева направо.
Поперечной осью называется направление, перпендикулярное главной оси. Она по умолчанию располагается сверху вниз.
Направление главной оси flex-контейнера можно задавать, используя базовое css свойство flex-direction.
flex-direction — направление главной оси
Доступные значения flex-direction:
· row (значение по умолчанию): слева направо;
· row-reverse: справа налево;
· column: сверху вниз;
· column-reverse: снизу вверх;
Добавив в первом примере свойство flex-direction: column; мы получаем уже другой результат. Все наши блоки расположатся в одну колонку.
justify-content – выравнивание по главной оси.
Css свойство justify-content определяет то, как будут выровнены элементы вдоль главной оси.
Доступные значения justify-content:
· flex-start (значение по умолчанию): блоки прижаты к началу главной оси;
· flex-end: блоки прижаты к концу главной оси;
· center: блоки располагаются в центре главной оси;
· space-between: первый блок располагается в начале главной оси, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве;
· space-around: все блоки равномерно распределены вдоль главной оси, разделяя все свободное пространство поровну;
Все производимые изменения хорошо показаны на картинке ниже.
align-items – выравнивание по поперечной оси.
Css свойство align-items определяет то, как будут выровнены элементы вдоль поперечной оси.
Доступные значения align-items:
· flex-start: блоки прижаты к началу поперечной оси
|
|
· flex-end: блоки прижаты к концу поперечной оси
· center: блоки располагаются в центре поперечной оси
· baseline: блоки выровнены по их baseline
· stretch (значение по умолчанию): блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width/max-width, если таковые заданы.
Важно!
СSS свойства flex-direction, justify-content, align-items должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.
Flex-wrap
Многострочная организация блоков внутри flex-контейнера.
Пример, который мы рассмотрели выше, был построен с учетом однострочного расположения блоков. По умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap.
Доступные значения flex-wrap:
· nowrap (значение по умолчанию): блоки расположены в одну линию слева направо;
· wrap: блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они следуют друг за другом слева направо;
· wrap-reverse: то-же что и wrap, но блоки располагаются в обратном порядке.
Align-content
Существует также свойство align-content, которое определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой пространство flex-контейнера.
Важно!
align-content работает только в многострочном режиме (т.е. в случае flex-wrap:wrap; или flex-wrap:wrap-reverse;)
Доступные значения align-content:
· 
flex-start: ряды блоков прижаты к началу flex-контейнера (к верху);
· flex-end: ряды блоков прижаты к концу flex-контейнера (к низу);
|
|
· center: ряды блоков находятся в центре flex-контейнера
· space-between: первый ряд блоков располагается в начале flex-контейнера, последний ряд блоков блок – в конце, все остальные ряды равномерно распределены в оставшемся пространстве.
· space-around: ряды блоков равномерно распределены в от начала до конца flex-контейнера, разделяя все свободное пространство поровну.
· stretch (значение по умолчанию): Ряды блоков растянуты, дабы занять все имеющееся пространство.
Важно!
СSS свойства flex-wrap и align-content должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.
CSS правила для дочерних элементов flex-контейнера
Flex-basis – базовый размер отдельно взятого flex-блока
Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены изменения других flex-факторов.
Flex-basis может быть задан в любых единицах измерения длинны (px, em, %, …) или auto (по умолчанию). Если задан как auto – за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указаны явно.
flex-grow – “жадность” отдельно взятого flex-блока
Определяет то, на сколько отдельный flex-блок может быть больше соседних элементов, если это необходимо. flex-grow принимает безразмерное значение (по умолчанию 0)
Пример 1:
Если все flex-блоки внутри flex-контейнера имеют flex-grow:1, то они будут одинакового размера
Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные
Пример 2:
Если все flex-блоки внутри flex-контейнера имеют flex-grow:3, то они будут одинакового размера
Если один из них имеет flex-grow:12, то он будет в 4 раза больше, чем все остальные
Т.е. абсолютное значение flex-grow не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.
flex-shrink – фактор “сжимаемости” отдельно взятого flex-блока
Определяет, насколько flex-блок будет уменьшаться относительно соседних эдементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен 1.
align-self – выравнивание отдельно взятого flex-блока по поперечной оси.
Позволяет переопределять свойство flex-контейнера align-items отдельного flex-блока.
Доступные значения align-self:
· flex-start: flex-блок прижат к началу поперечной оси
· flex-end: flex-блок прижат к концу поперечной оси
· center: flex-блок располагаются в центре поперечной оси
· baseline: flex-блок выравнен по baseline
· stretch (по умолчанию): flex-блок растянут, чтобы занять все доступное место по поперечной оси, при этом учитываются min-width/max-width, если таковые заданы.
order – порядок следования отдельно взятого flex-блока внутри flex-контейнера.
По умолчанию все блоки будут следовать друг за другом в порядке, заданном в html. Однако этот порядок можно изменить с помощью свойства order. Оно задается целым числом и по умолчанию равно 0.
Значение order не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.
margin:autoпо вертикали. Мечты сбываются!
Flexbox можно любить хотя бы за то, что привычное всем выравнивание по горизонтали через margin:auto здесь работает и для вертикали!
.my-flex-container {
display: flex;
height: 300px; /* Или что угодно */
}
.my-flex-block {
width: 100px; /* Или что угодно */
height: 100px; /* Или что угодно */
margin: auto; /* Магия! Блок отцентрирован по вертикали и горизонтали! */
}