Вход Регистрация
ruen

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

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

css-flex-values

Работа этого свойства заключается в том, что контейнер будет вести себя гибким образом – растягиваться или сужаться для того, чтобы разместить элементы правильным образом. Больше нет нужды использовать свойство 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, а также приведен список свойств с описаниями. Использовать данную технологию стоит с осторожностью, ее поддерживают только современные браузеры.

Комментарии (0)
Для комментирования войдите или зарегистрируйтесь.
Оставить заявку

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

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

Eqsash (Инструменты)

Приложение для Android - VK LAST USER ID, отучитель от зависимости и т.д.:
Доступно в Google Play

Amessage (Общение)

Вход в веб-версию
Приложение для Android:
Доступно в Google Play

Поделиться

Подписаться

YouTube

Книги

IT-заметки - Простым языком о самом нужном (HTML, CSS, JavaScript, PHP, базы данных, Drupal, Битрикс, SEO, домены, безопасность и другое), PDF, 500 стр.