Другое

Свойство CSS-flex: определение, шпаргалка, назначение и свойства

Lorem ipsum dolor

CSS-свойство flexbox или просто flex (далее «флекс») это CSS-макет адаптивного модуля веб-сайта. Флекс несет в себе идею «основной оси», по которой строится компоновка компонентов адаптивного контейнера. Флекс — это популярная технология, которая помогает создавать адаптивные сайты.

Иногда CSS-flexbox сравнивают с CSS-grid, пытаясь сопоставить их достоинства и недостатки. Это совершенно разные технологии, которые делают одно дело — создают адаптивные сайты. «Грид» использует сетчатый подход и «разбивает» контейнер на сетку, где есть строки, столбики и ячейки. Флекс использует оси, на которые «нанизываются» элементы, они также образуют столбцы и строчки, однако работают по-другому.

Флекс — что это?

Флекс в CSS может:

  1. назначить флекс-составляющим расположенность в нескольких дирекциях: «слева направо», «справа налево», «сверху вниз», «снизу вверх»;

  2. переназначать порядок расположения флекс-составляющих;

  3. равномерно распределять размерность составляющих, чтобы они органично располагались в заданном модуле;

  4. центрировать составляющие по горизонтальным и вертикальным плоскостям;

  5. распределять составляющие таким образом, чтобы не образовывалось перезаполнение модуля.

Флекс удобно применять, когда нужно организовать одномерное расположение элементов. Например:

  • меню горизонтального вида;

  • сайдбар слева и/или справа;

  • подвал;

  • и др.

Что такое флекс-контейнер

Флекс-контейнер — это какой-нибудь определенный модуль сайта, которому задано CSS-свойство «flex». Объявленный таким образом модуль сайта будет обладать всеми флекс-характеристиками.

Флекс-контейнер объявляется по следующему шаблону:

.<класс или ID контейнера> {

display: flex;

}

 

Внутри флекс-контейнера может располагаться множество других элементов. Каждый вложенный в такой контейнер компонент будет считаться флекс-компонентом и подчиняться соответствующим правилам.

Флекс-элементы

Каждая флекс-составляющая, входящая во флекс-контейнер, имеет следующие особенности:

  1. У каждого элемента блокируется его собственное значение характеристики «display».

  2. Исчезает пустое расстояние между составляющими.

  3. Чтобы задавать собственные свойства каждому отдельному элементу, он не должен быть анонимным.

  4. «Margin» флекс-элементов не «схлопывается».

  5. При использовании свойства «margin: auto» все элементы равномерно удаляются друг от друга.

  6. Размер каждого отдельного флекс-элемента равняется его содержимому.

  7. Элементы возможно расположить в различном порядке.

Направление флекс-элементов

Для того чтобы указать флекс-компонентам направленность, для флекс-модуля сайта необходимо задействовать свойство «flex-direction».

Например:

  1. «flex-direction: row». Значение по изначальному определению. Каждый компонент располагается в строчном виде «слева направо».

  2. «flex-direction: row-reverse». Распределит компоненты в строчном виде, но в обратном направлении.

  3. «flex-direction: column». Распределит компоненты в столбчатом виде «сверху вниз».

  4. «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;

}

 

Заключение

Флекс — это способ сделать «гибкий» контейнер. Этот технологичный подход отлично себя зарекомендовал, поэтому активно применяется в современной веб-разработке. Флекс удобен тем, что работает в рамках флекс-контейнера и поддерживает вложенные элементы. Это значит, что можно организовать флекс-контейнер, состоящий из других флекс-контейнеров. Если вы дочитали статью до конца, значит, вопрос «что такое флекс?» возникать у вас больше не будет.

Схожие статьи

Windows 10 fall creators update: что это за обновление, что нового?
Другое

Windows 10 fall creators update: что это за обновление, что нового?

Другое

Как отсортировать данные в таблице? Сортировка данных в диапазоне

MVC: что это такое, в чем отличия между фреймворком и архитектурой
Другое

MVC: что это такое, в чем отличия между фреймворком и архитектурой

Что делать, если не удается открыть файл Office Open XML: как исправить
Другое

Что делать, если не удается открыть файл Office Open XML: как исправить