CSS Flexbox - это технология для создания гибких и адаптивных макетов за счет упорядочивания элементов во flex-контейнере. Документация по всем возможностям flexbox есть на официальном сайте. Мы же рассмотрим основные возможности flex на примерах. Эта статья своего рода шпаргалка по flexbox css.

Свойство display flex

Во flexbox существует два вида свойств: одни применяются к flex-контейнеру, другие к элементам внутри него. Flex-контейнер - это своего рода коробка, в которой хранятся flex-элементы. Чтобы превратить элемент во flex-контейнер, необходимо установить ему свойство display: flex или display: inline-flex.

Для примера возьмем следующую html-разметку:

<div>
  Текст
  <div class="container">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>
</div>

В примере мы видим блок div с классом container, который содержит четыре дочерних пронумерованных блока div с классом child. Чтобы сделать div с классом container flex-контейреном, необходимо применить к нему свойство display: flex:

.container{
  display: flex;
}

или свойство display: inline-flex:

.container{
  display: inline-flex;
}

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

Ниже можно посмотреть как будут вести себя элементы в зависимости от значения свойства display. Блок с черной рамкой это div с классом container, а элементы с голубым фоном блоки с классом child.

Далее дочерними элементами flex-контейнера можно легко управлять с помощью различных css-свойств.

Свойство flex-direction

Свойство flex-direction управляет направлением главной и поперечной осей в контейнере. По умолчанию все элементы располагаются вдоль главной оси слева направо. Может принимать четыре значения:

  • row (по умолчанию) - элементы располагаются в строку, слева направо;
  • row-reverse - элементы располагаются в строку, справа налево;
  • column - элементы располагаются в столбец, сверху вниз;
  • column-reverse - элементы располагаются в столбец, снизу вверх.

Применяется свойство следующим образом:

.container{
  display: flex;
  flex-direction: row;
}

Ниже можно увидеть как ведут себя элементы при различных значениях свойства flex-direction

Свойство flex-wrap

Flex-wrap определяет, будут ли дочерние элементы контейнера переносится на другой ряд, если им не хватает места.

Свойство может принимать три значения:

  • nowrap (по умолчанию) - элементы выстраиваются в одну строку и сжимаются до необходимых размеров;
  • wrap - элементы переносятся на несколько строк;
  • wrap-reverse - элементы переносятся на несколько строк в порядке противоположном свойству flex-direction.

Применяется свойство следующим образом:

.container{
  display: flex;
  flex-wrap: nowrap;
}

Посмотрим как ведут себя элементы при различных значениях свойства flex-wrap. Для наглядности установим ширину дочерних элементов в 40%:

div.child{
  width: 45%;
}

Свойство flex-flow

Flex-flow объединяет в себе свойства flex-direction и flex-wrap и позволяет задавать их в одной строке. Главное соблюдать порядок, сначала указать свойство flex-direction, а потом flex-wrap. Пример:

.container{
  display: flex;
  flex-flow: row nowrap;
}

Свойство justify-content

Свойство определяет как будет распределяться пространство вокруг флекс-элементов вдоль главной оси контейнера. Свойство justify-content может принимать следующие значения:

  • flex-start - элементы прижаты к началу оси;
  • flex-end - элементы прижаты к концу оси;
  • center - элементы выравниваются по центру оси;
  • space-between - элементы равномерно распределяются по всей оси, первый и последний элементы прижимаются к краям контейнера;
  • space-around - элементы равномерно распределяются по всей оси, пространство перед первым и после последнего элемента равно половине пространства между двумя соседними элементами;
  • space-evenly - элементы распределяются так, что пространство между элементами и пространство перед первым и после последнего элемента везде равны.

Пример:

.container{
  display: flex;
  justify-content: flex-start;
}

Свойство align-items

Свойство align-items выравнивает элементы внутри контейнера вдоль поперечной оси. Свойство может принимать следующие значения:

  • flex-start - элементы выравниваются по верхней границе контейнера;
  • flex-end - элементы выравниваются по нижней границе контейнера;
  • center - элементы выравниваются по центру поперечной оси контейнера;
  • baseline - элементы выравниваются по их базовой линии;
  • stretch - элементы растягиваются на всю высоту контейнера.

Пример:

.container{
  display: flex;
  align-items: flex-start;
}

Свойство align-content

Align-content работает подобно justify-content, только распределяет элементы вдоль поперечной оси и работает с несколькими строками. Свойство может принимать следующие значения:

  • flex-start - строки располагаются в начале оси и каждая следующая строка занимает положение вровень с предыдущей;
  • flex-end - строки располагаются в конце оси и каждая следующая строка занимает положение вровень с предыдущей;
  • center - строки располагаются по центру оси или контейнера;
  • space-between - строки раномерно располагаются вдоль оси, расстояние между ними одинаковое, а первая и последняя строки прижимаются к краям контейнера;
  • space-around - расстояние между строками одинаковое, а расстояние перед первой и после последней строки равно половине расстояния между строками;
  • space-evenly - расстояние между строк, а также расстояние перед первой и после последней, одинаковое;
  • stretch - строки равномерно растягиваются занимая все свободное пространство.

Пример:

.container{
  display: flex;
  flex-wrap: wrap; /*Делаем контейнер многострочным*/
  align-content: flex-start;
}

Отступы между элементами

Свойства gap, row-gap, column-gap отвечают за отступы между элементами, строками и колонками внутри flex-контейнера соответственно. Расстояния задаются только между элементами, а не между элементами и границами родителя. Расстояния указываются в пикселях, процентах и других единицах.

Gap устанавливает расстояние между строками и колонками. Причем можно задавать два числа, тогда расстояние между строками и колонками будет разное. Первое число задает расстояние между строками, а второе между колонками.

Примеры:

.container{
  display: flex;
  flex-wrap: wrap; /*Делаем контейнер многострочным*/
  gap: 50px 25px; /* 50px расстояние между строками, 25px расстояние между колонками*/
}

Свойство row-gap задает расстояние между строками:

.container{
  display: flex;
  flex-wrap: wrap; /*Делаем контейнер многострочным*/
  row-gap: 50px;
}

Свойство column-gap задает расстояние между колонками:

.container{
  display: flex;
  flex-wrap: wrap; /*Делаем контейнер многострочным*/
  column-gap: 50px;
}

Свойства flex-элементов

Выше рассмотренные свойства устанавливаются для контейнера и влияют на его содержимое. Но во flebox есть свойства, которые позволяют управлять и отдельными flex-элементами.

Свойство order

Order устанавливает порядок расположения элементов внутри flex-контейнера относительно друг друга. В качестве значения может принимать любое целое число, в том числе отрицательное. По умолчанию у всех элементов order равен 0.

Пример использования:

.container{
  display: flex;
}
.child-1{
  order: 3;
}
.child-2{
  order: 1;
}
.child-3{
  order: 2;
}

Свойство flex-grow

Flex-grow позволяет задать какую долю пространства в контейнере может занимать элемент. В качестве знаения можно задать любое не отрицательное число. По умолчанию у всех элементов это значение 0.

Пример:

.container{
  display: flex;
}
.child-2{
  flex-grow: 1;
}

Свойство flex-shrink

Flex-shrink позволяет задать коэффициент сжатия элемента. В качестве значения может принимать любое не отрицательное число. По умолчанию равен 1.

Пример:

.container{
  display: flex;
}
.child{
  width: 40%;
}
.child-2{
  flex-shrink: 0;
}

Свойство flex-basis

Flex-basis задает размер элемента по главной оси. Можно задать в пикселях, процентах или с помощью ключевых слов: auto (по умолчанию), content, max-content, min-content, fit-content.

Пример:

.container{
  display: flex;
}
.child-2{
  flex-basis: 50%;
}