Веб-разработка, логотип Websash

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

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

css-flex-values

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

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

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

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

Оставить заявку

Последние статьи

Популярные разделы