Перейти к содержанию

align-content

Свойство align-content задаёт тип выравнивания строк внутри флекс-контейнера по поперечной оси при наличии свободного пространства.

Демо

Это свойство не влияет на однострочные flex-контейнеры (т. е. с flex-wrap: nowrap).

Flexbox и выравнивание

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* Positional alignment */
align-content: center; /* Pack items around the center */
align-content: start; /* Pack items from the start */
align-content: end; /* Pack items from the end */
align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end; /* Pack flex items from the end */
align-content: left; /* Pack items from the left */
align-content: right; /* Pack items from the right */

/* Baseline alignment */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* Distributed alignment */

/* Distribute items evenly
The first item is flush with the start,
the last is flush with the end */
align-content: space-between;

/* Distribute items evenly
Items have a half-size space
on either end */
align-content: space-around;

/* Distribute items evenly
Items have equal space around them */
align-content: space-evenly;

/* Distribute items evenly
Stretch 'auto'-sized items to fit
the container */
align-content: stretch;

/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;

/* Global values */
align-content: inherit;
align-content: initial;
align-content: unset;

Значения

Значение по-умолчанию: stretch

Применяется к флекс-контейнеру

ЗначениеПоложениеОписание
flex-startflex-startСтроки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей.
centercenterСтроки располагаются по центру контейнера.
flex-endflex-endСтроки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей.
space-betweenspace-betweenСтроки равномерно распределяются в контейнере и расстояние между ними одинаково.
space-aroundspace-aroundСтроки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками.
stretchstretchСтроки равномерно растягиваются, заполняя свободное пространство.

Спецификации

Поддержка браузерами

Пример

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>align-content</title>
    <style>
      .flex-container {
        width: 70px;
        height: 240px;
        border: 1px solid #333;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
      }
      .flex-container div {
        width: 70px;
        height: 70px;
        border-radius: 50%;
      }
      .red {
        background: red;
      }
      .yellow {
        background: yellow;
      }
      .green {
        background: green;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="red"></div>
      <div class="yellow"></div>
      <div class="green"></div>
    </div>
  </body>
</html>

Примечание

Safari до версии 9 поддерживает свойство -webkit-align-content.

Ссылки

Комментарии