Flexbox. Свойства flex контейнера

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

Свойство display со значениями flex/inline-flex

Определяет flex-контейнер, блочный или строчный зависит от переданного значения. Преобразовывает все свои дочерние элементы во flex-элементы.

Свойство flex-wrap

Определяет смогут ли flex-элементы переносится на следующие строки, когда перестают помещаться внутри flex-контейнера. По умолчанию: nowrap. Значения:

nowrap - элементы не переносятся

wrap - элементы переносятся

wrap-reverse - элементы переносятся с обратным порядком

.flex{
  flex-wrap: wrap; элементы переносятся
}

Свойство flex-direction

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

row - основная ось горизонтальная, слева направо

row-reverse - основная ось горизонтальная, справа налево

column - основная ось вертикальная, сверху вниз

column-reverse - основная ось вертикальная, снизу вверх

.flex{
  flex-direction: column;
}

Свойство flex-flow.

Это сокращение для свойств flex-direction и flex-wrap, которые вместе определяют основную и поперечные ось и возможность перемещаться по строкам. По умолчанию значение: row nowrap.

.flex{
  flex-flow: row wrap;
}

Свойство justify-content

Определяет выравнивание вдоль основной оси (направление зависит от значения свойства flex-direction). Значения:

flex-start (по умолчанию) - flex-элементы прижимаются к началу основной оси.

flex-end - flex-элементы прижимаются к концу основной оси.

center - flex-элементы располагаются по центру основной оси.

space-between - flex-элементы располагаются равномерно по основной оси. Первый элемент находится в начале оси, последний элемент находится в конце оси.

space-around - flex-элементы располагаются равномерно по основной оси .К каждому flex-элементу добавляется пространство слева и справа.

space-evenly - flex-элементы располагаются равномерно по основной оси с одинаковым пространством вокруг них.

Свойство align-items

Определяет выравнивание вдоль поперечной оси (направление зависит от значения свойства flex-direction).

stretch (по умолчанию) -  flex-элементы растягиваются на весь размер поперечной оси flex-контейнера.

flex-start - flex-элементы прижимаются к началу поперечной оси.

flex-end - flex-элементы прижимаются к концу поперечной оси.

center - flex-элементы располагаются по центру поперечной оси.

baseline - flex-элементы располагаются по базовой линии.