Основы работы с CSS Flexbox

Development | Amber | Комментировать запись

Flexbox – отличный способ повысить гибкость макетов, улучшить их адаптивный дизайн и упростить выравнивание элементов на 2D-плоскости. Flexbox довольно прост в обращении, если вы знакомы с основными свойствами.

Первое, что нужно сделать для работы с Flexbox – установить display: flex для элемента контейнера. Дочерние элементы flex-контейнера будут flex-элементами. Один набор свойств может применяться к flex-контейнерам и оказывать влияние на все элементы в целом, а другой – применяться к flex-элементам и распространять их влияние на целевые элементы. Flex-элементы, в свою очередь, также могут быть flex-контейнерами для содержащихся в них элементов, что упрощает создание сложных макетов.

Примечание: Данные за 2020 год показывают, что 98% браузеров во всем мире теперь поддерживают flexbox без необходимости использования префиксов вендоров.

Здесь вы найдете краткое руководство, которое поможет разобраться в основных свойствах Flexbox. Это далеко не исчерпывающий список всех доступных свойств и значений, а скорее шпаргалка из наиболее полезных или часто используемых свойств.

Свойства flex-контейнеров

Вот контейнер, содержащий 3 flex-элемента span, без Flexbox:

<div class="box">
<span class="item">
<img src="/images/dino.svg" width="64" height="45" alt="Dino Shark">
</span>
<span class="item">
<img src="/images/steampunk.svg" width="64" height="45" alt="Steampunk Shark">
</span>
<span class="item">
<img src="/images/skeleton.svg" width="64" height="45" alt="Skeleton Shark">
</span>
</div>

Свойство display: flex

Теперь давайте автоматически улучшим контейнер, просто установив display: flex для него. После этого элементы автоматически расширятся до доступного места в контейнере:

.container {
display: flex;
}

Свойство flex-direction

Изменить направление элементов можно с помощью свойства flex-direction

.container {
display: flex;
flex-direction: column;
}

По умолчанию используется row (строка), есть дополнительные доступные значения – row-reverse, column, column-reverse (обратная строка, столбец, обратный столбец соответственно). Значения row-reverse и column-reverse меняют порядок элементов на обратный, и при этом вам не нужно менять порядок элементов в разметке HTML.

.container {
display: flex;
flex-direction: column-reverse;
}

Примечание: Возможность переключаться между направлениями строк и столбцов позволяет очень легко адаптировать макеты на небольших устройствах с помощью изменения всего одного правила CSS в запросе.

Свойство justify-content

Свойство justify-content позволяет выровнять элементы по основной оси. Если flex-direction имеет значение column, то основная ось – это ось Y, а если flex-direction имеет значение row, основной осью будет Х.

Значение по умолчанию – flex-start. Другие доступные значения этого свойства – flex-end, center, space-between, space-around и space-evenly.

Свойство align-items

Свойство align-items – это аналог justify-content, но оно предназначено для выравнивания элементов по поперечной оси. По умолчанию имеет значение stretch, а также принимает flex-start, flex-end, center и baseline.

Свойство align-content

Свойство align-content похоже на align-items, но действует только тогда, когда в коде есть более одной строки flex элементов (см. также flex-wrap). По умолчанию оно имеет значение stretch, также принимает flex-start, flex-end, center, space-between, space-evenly.

Свойство flex-wrap

По умолчанию элементы не переносятся в новую строку при переполнении (так как свойство flex-wrap имеет значение nowrap). Но если элементы занимают больше места, чем доступно на экране, они переполняют экран. Это можно исправить, установив для свойства flex-wrap значение wrap.

Свойства flex-элементов

Свойство align-self

align-self похоже на align-items, но только оно предназначено для определенных элементов. Оно упрощает создание flex-элементов, выходящих за рамки основного правила.

Свойство flex-grow

С помощью flex-grow мы можем контролировать количество места, которое занимает flex-элемент по сравнению с другими элементами. flex-grow принимает числовое значение. Оно представляет собой часть доступного пространства в зависимости от значения flex-grow других элементов. По умолчанию это свойство имеет значение 0 (то есть элемент не будет занимать доступное пустое пространство).

Так как в основе этого свойства лежат пропорции, значение 200 для всех элементов в свойстве flex-grow по сути равняется значению 1.

Свойство flex-shrink

flex-shrink является противоположностью flex-grow и определяет способность элементов к усадке. По умолчанию для него установлено значение 1, а это означает, что элементы могут сжиматься. Как и flex-grow, свойство flex-shrink основано на пропорции между элементами элементами.

Свойство flex-basis

flex-basis определяет исходное пространство, которое занимает элемент. Однако оно не дает никаких гарантий, потому что также зависит от наличия дополнительного места, которое можно заполнить.

К примеру, если flex-basis всех элементов имеет значение 25%, то все они будут занимать одинаковое место. Но если увеличить flex-grow первого элемента до 1, не меняя flex-basis, то первый элемент займет остальную часть доступного пространства.

Если же третий элемент имеет значение flex-basis:77% и flex-shrink:0, то он отказывается сжиматься, чтобы освободить место для других элементов, которые имеют свойство flex-basis:25%.

.item {
flex-basis: 25%;
}
.item:last-child {
flex-basis: 77%;
flex-shrink: 0;
}

Свойство flex

flex – это сокращенное свойство для комбинации свойств flex-grow, flex-shrink и flex-base. Например, вот синтаксис элемента, значение flex-grow которого равно 2, flex-shrink – 0, а flex-base – 2rem:

.item {
flex: 2 0 2rem;
}