Другое

Свойство 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;

}

 

Заключение

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

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

Типы групп Active Directory, для чего это нужно, как создать новую группу
Другое

Типы групп Active Directory, для чего это нужно, как создать новую группу

Нейросеть простыми словами: все, что нужно знать о нейронных сетях
Другое

Нейросеть простыми словами: все, что нужно знать о нейронных сетях

Google тестирование сайта на скорость загрузки страниц и оптимизацию
Другое

Google тестирование сайта на скорость загрузки страниц и оптимизацию

Новости компьютерных технологий: весь мир новинок IT в одном сайте
Другое

Новости компьютерных технологий: весь мир новинок IT в одном сайте

×