Основные свойства CSS Flexbox

Использование свойства CSS display: flex широко распространено в современной веб-разработке для создания структуры страниц и позиционирования элементов.

<div class="display-flex">
  <div class="flex-child"></div>
  <div class="flex-child"></div>
  <div class="flex-child"></div>
</div>

Опишем структуру элементов с помощью Flexbox:

.display-flex{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.flex-child{
  height: 50px;
  border: 1px solid black;
  margin: 10px;
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 50%;
}

У Flexbox структуры есть родители и дочерние элементы. Для родителей помимо display: flex предусмотрены свойства flex-wrap и flex-direction – они описывают поток дочерних элементов. Свойства justify-content и align-items отвечают за выравнивание дочерних элементов относительно родителя и друг друга.

 

Flex-wrap

Свойство flex-wrap описывает возможность переноса элементов на другую строку. Его значения:
nowrap – элементы не переносятся, значение по-умолчанию;
wrap – элементы могут переноситься на другую строку;
wrap-reverse – элементы могут переноситься на другую строку, но порядок их отображения будет обратным wrap.

 

Flex-direction

Свойство flex-direction описывает направление потока дочерних элементов. Его значения:
row – направление элементов в строку слева направо, значение по-умолчанию;
row-reverse – направление элементов в строку справа налево;
column – направление элементов в колонку сверху вниз;
column-reverse – направление элементов в колонку снизу вверх.

Для упрощения существует свойство flex-flow, которое описывает сразу flex-wrap и flex-direction в формате:

flex-flow: flex-direction flex-wrap;

Или:

flex-flow: column wrap;

Justify-content

Свойство justify-content описывает расположение дочерних элементов относительно друг друга в строке. Его значения:
space-between – равные расстояния между всеми элементами, у первого и последнего элементов нет отступов от краев родительского элемента;
space-around – равные расстояния слева и справа у каждого дочернего элемента, то есть между элементами будет отступ 2x, у первого и последнего элементов отступы от краев родительского блока будут равны x.

 

Align-items

Свойство align-items описывает расположение дочерних элементов относительно друг друга по вертикали. Мы обратим внимание на значения:
center – дочерние элементы выравниваются по центру относительно высоты родительского блока;
flex-start – дочерние элементы располагаются вверху родительского блока;
flex-end – дочерние элементы располагаются внизу родительского блока.

Для описания дочерних элементов существуют свойства flex-grow, flex-shrink и flex-basis:

 

Flex-basis

Flex-basis описывает базовую ширину дочернего элемента, может быть в пикселях и процентах. Значение по-умолчанию 0%;

 

Flex-grow

Свойство flex-grow описывает возможность дочернего элемента растягиваться относительно базовой ширины, в том случае если она задана фиксировано в пикселях (иначе элемент будет растягиваться в любом случае). По-умолчанию 0, если нужно чтобы элемент мог растягиваться – 1;

 

Flex-shrink

Свойство flex-shrink описывает возможность дочернего элемента сжиматься относительно базовой ширины, в том случае если она задана фиксировано в пикселях (иначе элемент будет сжиматься в любом случае). По-умолчанию 0, если нужно чтобы элемент мог сжиматься – 1;

Для сокращенной записи свойств дочернего элемента можно использовать свойство flex. Его формат:

flex: flex-grow flex-shrink flex-basis;

Или:

flex: 1 1 100px;

Мы перечислили основные значения свойств Flexbox, как правило, этого достаточно для использования display: flex в проектах.

Нужно отметить, что использование Flexbox требует некоторого опыта и понимания того, как поведет себя структура при указании тех или иных свойств. Это не идеальный, но гораздо более удобный способ создания структуры, чем при помощи float.

« список статей