CSS-свойство flexbox или просто flex (далее «флекс») — это CSS-макет адаптивного модуля веб-сайта. Флекс несет в себе идею «основной оси», по которой строится компоновка компонентов адаптивного контейнера. Флекс — это популярная технология, которая помогает создавать адаптивные сайты.
Иногда CSS-flexbox сравнивают с CSS-grid, пытаясь сопоставить их достоинства и недостатки. Это совершенно разные технологии, которые делают одно дело — создают адаптивные сайты. «Грид» использует сетчатый подход и «разбивает» контейнер на сетку, где есть строки, столбики и ячейки. Флекс использует оси, на которые «нанизываются» элементы, они также образуют столбцы и строчки, однако работают по-другому.
Флекс — что это?
Флекс в CSS может:
назначить флекс-составляющим расположенность в нескольких дирекциях: «слева направо», «справа налево», «сверху вниз», «снизу вверх»;
переназначать порядок расположения флекс-составляющих;
равномерно распределять размерность составляющих, чтобы они органично располагались в заданном модуле;
центрировать составляющие по горизонтальным и вертикальным плоскостям;
распределять составляющие таким образом, чтобы не образовывалось перезаполнение модуля.
Флекс удобно применять, когда нужно организовать одномерное расположение элементов. Например:
меню горизонтального вида;
сайдбар слева и/или справа;
подвал;
и др.
Что такое флекс-контейнер
Флекс-контейнер — это какой-нибудь определенный модуль сайта, которому задано CSS-свойство «flex». Объявленный таким образом модуль сайта будет обладать всеми флекс-характеристиками.
Флекс-контейнер объявляется по следующему шаблону:
.<класс или ID контейнера> {
display: flex;
}
Внутри флекс-контейнера может располагаться множество других элементов. Каждый вложенный в такой контейнер компонент будет считаться флекс-компонентом и подчиняться соответствующим правилам.
Флекс-элементы
Каждая флекс-составляющая, входящая во флекс-контейнер, имеет следующие особенности:
У каждого элемента блокируется его собственное значение характеристики «display».
Исчезает пустое расстояние между составляющими.
Чтобы задавать собственные свойства каждому отдельному элементу, он не должен быть анонимным.
«Margin» флекс-элементов не «схлопывается».
При использовании свойства «margin: auto» все элементы равномерно удаляются друг от друга.
Размер каждого отдельного флекс-элемента равняется его содержимому.
Элементы возможно расположить в различном порядке.
Направление флекс-элементов
Для того чтобы указать флекс-компонентам направленность, для флекс-модуля сайта необходимо задействовать свойство «flex-direction».
Например:
«flex-direction: row». Значение по изначальному определению. Каждый компонент располагается в строчном виде «слева направо».
«flex-direction: row-reverse». Распределит компоненты в строчном виде, но в обратном направлении.
«flex-direction: column». Распределит компоненты в столбчатом виде «сверху вниз».
«flex-direction: column-reverse». Распределит компоненты в столбчатом виде, но уже «снизу вверх».
Как это выглядит в коде:
.example-container {
display: flex;
flex-direction: column;
}
Дополнительная линия для флекс-компонентов
По определению все компоненты во флекс-контейнере изначально будут распределяться в единую линию по единой оси. Если размерность и количество flex-компонентов превысят размерность флекс-модуля, тогда компоненты «выскочат» за пределы флекс-блока сайта. То есть при переполненном контейнере элементы не образуют другую линию, а продолжают строить первую. Для того чтобы избежать данной ситуации и в случае переполнения флекс-модуля сайта компоненты сформировали вторую линию, необходимо воспользоваться свойством «flex-wrap».
Например:
«flex-wrap: nowrap» — значение по изначальному определению;
«flex-wrap: wrap» — формируются дополнительные ряды компонентов, когда они не вмещаются в единую линию;
«flex-wrap: wrap-reverse» — формирует новую линию, располагая компоненты в обратной направленности.
Как это выглядит в коде:
.example-container {
display: flex;
flex-wrap: wrap;
}
Как задать порядок флекс-элементу
Еще одно важное свойство флекс-компонентов — это порядковая расположенность во флекс-модуле. За порядок расположения отвечает свойство «order». Оно назначается каждому отдельному элементу флекс-модуля. По определению «ордер» элемента изначально равняется «0». Если задать его значение «-1», тогда элемент расположится в начале оси. Если задать его значение «1», тогда элемент расположится в конце оси. Если несколько элементов располагают одинаковым «ордером», тогда они располагаются согласно исходной сортировке.
Как это выглядит в коде:
.example-container {
display:flex;
}
.example-item {
order: -1;
}
Выравнивание флекс-компонентов
Все флекс-элементы располагаются на основной оси сгруппированно, например, по определению все элементы изначально начинают группироваться слева. Таким образом, может произойти ситуация, когда с одной стороны от элементов будет находиться «пустота».
Чтобы подровнять флекс-компоненты по основной оси, нужно воспользоваться свойством «justify-content». Например:
«justify-content: flex-start» — значение по определению;
«justify-content: flex-end» — не меняется порядок элементов, но они выстраиваются с противоположной стороны флекс-модуля сайта;
«justify-content: center» — компоненты выстраиваются в центре флекс-модуля сайта;
«justify-content: space-between» — равно удаленное распределение элементов по центральной линии с идентичными промежутками между ними, однако первый элемент «прижимается» к началу флекс-модуля, а последний — к концу флекс-модуля;
«justify-content: space-around» — равно удаленное распределение элементов во флекс-модуле с идентичными промежутками между ними, однако первый и последний компоненты «отходят» от краев на половину расстояния, отделяющего остальные флекс-компоненты.
Как это выглядит в коде:
example-container {
display: flex;
justify-contant: space-around;
}
Флекс-составляющие можно выровнять по вертикальной (или поперечной) оси. Для этого нужно воспользоваться свойством «align-items». Например:
«align-items: flex-start» — прижимает верхнюю кромку флекс-составляющих к верхней рамке флекс-модуля;
«align-items: flex-end» — прижимает нижнюю кромку флекс-составляющих к нижней рамке флекс-модуля;
«align-items: center» — центр каждого флекс-элемента располагается на главной рамке флекс-модуля;
«align-items: stretch» — растягивает флекс-элементы от верхнего к нижнему краю флекс-модуля.
Как это выглядит в коде:
.example-container {
display: flex;
align-items: stretch
}
Если во flex-контейнерах располагается несколько рядов с flex-компонентами, тогда бывает, что линии нужно выровнять относительно друг друга. Это становится возможным, если использовать свойство «align-content». Например:
«align-content: flex-start» — верхняя кромка верхнего ряда flex-составляющих прижимается к верхней рамке контейнера, а последующие линии прижимаются своими краями к верхнему ряду;
«align-content: flex-end» — нижний край нижней линии компонентов прижимается к нижнему краю flex-модуля, следующие линии флекс-компонентов прижимаются уже к ней;
«align-content: center» — линии флекс-элементов прижаты к центральной линии flex-модуля, расстояние между кромками флекс-модуля и краями верхней и нижней линий компонентов одинаково;
«align-content: space-between» — равно удаленное распределение линий flex-компонентов, прижимающее крайние линии к верхнему и нижнему краям флекс-контейнера;
«align-content: space-around» — равно удаленное распределение линий flex-компонентов, отделяющее крайние линии от краев флекс-модуля на половину расстояния между линиями.
Как это выглядит в коде:
.flex-container {
display: flex;
align-content: space-around;
}
Заключение
Флекс — это способ сделать «гибкий» контейнер. Этот технологичный подход отлично себя зарекомендовал, поэтому активно применяется в современной веб-разработке. Флекс удобен тем, что работает в рамках флекс-контейнера и поддерживает вложенные элементы. Это значит, что можно организовать флекс-контейнер, состоящий из других флекс-контейнеров. Если вы дочитали статью до конца, значит, вопрос «что такое флекс?» возникать у вас больше не будет.
Другое
