Включаем Flexbox

Свойство display

Устанавливает отображение flexbox для дочерних элементов.

.container{

display:flex;

}

flex-direction

Определяет направление, в котором расположатся дочерние элементы (в вертикальном или горизонтальном). Префикс -reverse меняет порядок расположения элементов на обратный.

row (по умолчанию) слева направо
row-reverse справа налево
column сверху вниз
column-reverse снизу вверх

.container{

flex-direction:row| row-reverse| column| row| column-reverse;

}

justify-content

Устанавливает выравнивание дочерних элементов по горизонтали (если flex-direction: row) или вертикали (если flex-direction: column).

flex-start (по умолчанию) выравнивание по левому краю
flex-end по правому краю
center по середине
space-between расширяет пространство между элементами так, чтобы первый элемент касался левого края, а последний – правого
space-around расстояние между элементами одинаково, а расстояние между крайними элементами и границами родителя равно половине расстояния между элементами
space-evenly расстояния между элементами и границами родителя равны

.container{

}

align-items

Устанавливает выравнивание дочерних элементов по вертикали (если flex-direction: row) или по горизонтали (если flex-direction: column).

stretch (по умолчанию) растянуть элементы так, чтобы заполнить родительский блок
flex-start выравнивание по верхнему краю
flex-end по нижнему краю
center по центру
baseline по первой строке текста

.container{

align-items:stretch| flex-start| flex-end| center| baseline;

}

flex-wrap

Разрешает перенос элементов на новую строку. По умолчанию перенос запрещён.

nowrap (по умолчанию) все элементы выстроены одной строкой
wrap элементы могут переноситься на следующую строку
wrap-reverse строки расположены в обратном порядке

.container{

flex-wrap:nowrap| wrap| wrap-reverse;

}

flex-flow

Сокращённая запись двух свойств flex-direction и flex-wrap. По умолчанию row nowrap

.container{

flex-flow:<‘flex-direction’>|| <‘flex-wrap’>;

}

align-content

Если дочерние элементы flexbox не помещаются в ширину блока и разрешён перенос элементов на новую строку (flex-wrap: wrap), то при помощи align-content можно настроить выравнивание этих строк.

Выравнивание может выполняться относительно горизонтали или вертикали в зависимости от значения свойства flex-direction.

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

.container{

}