Размещение элементов с помощью Flexbox

С появлением CSS Flexible Box Layout или CSS Flexbox в CSS3 задача размещения элементов существенно упростилась. Теперь для решения задач размещения мы пользуемся парочкой свойств, что позволяет делать гибкую компоновку и размещать адаптивные элементы в контейнере, которые размещаются в зависимости от текущего размера экрана. Перейдем к примеру, допустим есть у нас в контейнере три элемента, которые надо сделать по центру. Контейнер должен иметь свойство, для отображения дочерних элементов Flex:

.container {
  display: flex; /* Указываем что будем использовать Flex */
  justify-content: center; /* Выравниваем по горизонтали */
  align-items: center; /* Выравниваем по вертикали */
}

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Flexbox test</title>
</head>
<body>
  <div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</body>
</html>

Так как тренироваться будем на чистой странице, то необходимо указать ширину body 100% и его высоту равную размеру экрана 100vh. Так же блоки будут квадратами 100х100 пикселей черного цвета.

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

.block {
  background: #000000;
  width: 100px;
  height: 100px;
}

Результат похож на сплошную полоску, так как между ними нет отступов. Это решается свойствами justify-content. Можно поиграться меняя на любое из значений, смысл понятен из названия значения:

flex-start — прижимает к левому краю
flex-end — прижимает к правому краю
center — центрует
space-between — равные отступы между элементами
space-around — равные отступы между элементами и половина отступа от внешних краев
space-evenly — равные отступы между элементами и внешними краями

Сделаем равные отступы между элементами, установив значение space-between:

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

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

Последнее свойство будет работать в случае если у дочернего блока не установлена высота. Часто приходится пользоваться свойством align-content, здесь мы выравниваем все блоки внутри контейнера при наличии свободного пространства. Актуально когда у нас элементы не помещаются в ширину и идут в несколько строк. align-content имеет следующие свойства:

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

Чтобы лучше понять как это работает, добавим к структуре 4 блок, разрешим перенос при нехватке пространства flex-wrap: wrap и ширину блоков равную 30%:

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: space-evenly;
  min-height: 100%;
}

.block {
  background: #000000;
  width: 30%;
  height: 100px;
}

В статье были рассмотрены основные свойства которые могут понадобится в верстке, дополнительную информацию и примеры можно найти в документации на MDN.