Коротко о том, как использовать возможности CSS flex

06.08.18 ИТ / CSS 2878

Обычно при верстке страниц используется свойство display - оно помогает сделать отображение элемента нужным образом. У него достаточно много возможных значений, а не так давно были добавлены новые значения, которые позволяют верстать страницы совершенно иным способом. Одним из таких значений является flex.

Работа этого свойства заключается в том, что контейнер будет вести себя гибким образом – растягиваться или сужаться для того, чтобы разместить элементы правильным образом. Больше нет нужды использовать свойство float, так как display: flex позволяет сделать правильное выравнивание не только по горизонтали, но и по вертикали, а также произвести прочие операции с элементами. Для этого были добавлены новые CSS свойства, они позволяют управлять всей flex конструкцией - одни свойства применяются к основному контейнеру, а другие к элементам этого контейнера.

Какие свойства есть для контейнера? Список ниже:

• display – задает стиль отображения блока, возможные значения: flex, inline-flex;
• flex-direction - предназначен для изменения направления главной оси контейнера, возможные значения: row, column, row-reverse, column-reverse;
• flex-wrap – управляет переносом непомещающихся элементов, возможные значения: nowrap, wrap, wrap-reverse;
• flex-flow – свойство, сочетающее свойства flex-direction и flex-wrap, по сути короткая запись двух свойств. В качестве значений можно указать как значения первого свойства, так и второго, или сразу значения двух свойств через пробел: row nowrap, column wrap, column-reverse wrap-reverse;
• justify-content – выравнивает элементы по основной оси, возможные значения: flex-start, flex-end, center, space-between, space-around, space-evenly;
• align-content – выравнивает элементы по поперечной оси, возможные значения: stretch, flex-start, flex-end, center, space-between, space-around, space-evenly;
• align-items – позволяет выровнять элементы по поперечной оси внутри ряда, возможные значения: stretch, flex-start, flex-end, center, baseline.

Какие свойства есть для элементов контейнера? Расчет расположения элементов внутри контейнера в некоторых случаях зависит также от указанного значения для контейнера, в котором они находятся. Список ниже:

• flex-grow – позволяет задать коэффициент увеличения элемента при наличии свободного места в контейнере, возможные значения задаются в виде чисел;
• flex-shrink – позволяет задать коэффициент уменьшения элемента, противоположность вышеуказанному свойству, возможные значения задаются в виде чисел;
• flex-basis – позволяет задать базовую ширину элемента, возможные значения: %, px, em и т.д.;
• flex – короткая запись свойств: flex-grow, flex-shrink, flex-basis. Возможные значения соответствующие, можно указать 1, 2 или 3 значения сразу;
• align-self - изменяет свойство align-items только для отдельного элемента, возможные значения аналогичные;
• order - изменяет порядок элемента в общем ряду, возможные значения задаются в виде чисел.

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