Align-content не работает с элементами flex

У меня есть строка-направление flexbox, вложенная в направлении столбца flexbox, но когда я хочу использовать align-content в дочернем, это не работает.

Когда я заменяю display:flex родителя на display:block, он работает.

В приведенном ниже коде мы видим, что .row align-content: flex-end; не работает. Но если я заменяю .column display: flex; на display: block;, работает align-content: flex-end;.

Можно ли исправить это, пожалуйста?

body {
    background-color: grey;
}

.column {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    background-color: green;
}

.row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: flex-end;
    align-items: center;
    background-color: red;
}

.row-test {
    min-height: 200px;
}

span {
    width: 30%;
    background-color: orange;
}
<body class="column">
    <section class="row row-test">
        <span>Test Test Test Test Test Test Test Test Test</span>
        <span>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</span>
    </section>
</body>

Ответы

Ответ 1

Тот факт, что align-content "работает", когда основной контейнер flex переключен на display: block, является просто ошибкой браузера.

Он сдвигает элементы гибкости на дно, по желанию, но только в Firefox.

В Chrome это ничего не делает, это правильное поведение (по спецификации).

И в IE11 он перемещает элементы вверх (также несоответствующие).

Это ошибки и несоответствия, на которые не следует полагаться для руководства, поскольку они не помогают объяснить, как работает свойство align-content.

В одном гибком контейнере, как и в вопросе, align-content не действует. Используемое свойство align-items.

В контейнере multi-line flex для использования используется align-content.

Кроме того, свойство align-self тесно связано с align-items. Один из них предназначен для переопределения другого. Они оба работают вместе.

Из спецификации:

8.3. Поперечное осевое выравнивание: свойства align-items и align-self

align-items устанавливает выравнивание по умолчанию для всех элементов контейнера flex, включая анонимные элементы гибкости. align-self разрешает переопределение по умолчанию для отдельных элементов гибкости.

8.4. Линии гибких линий упаковки: align-contentСвойство

Свойство align-content выравнивает строки гибких контейнеров в пределах гибкий контейнер, когда имеется дополнительное пространство в поперечной оси, аналогично как justify-content выравнивает отдельные элементы в пределах основной оси. Обратите внимание: это свойство не влияет на однострочный контейнер flex.

В терминах этого вопроса забудьте о align-content. Это бесполезно (если только ваши гибкие элементы не обертываются).

Просто используйте align-items: flex-end (или align-self: flex-end на span):

body {
  background-color: grey;
}
.column {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  background-color: green;
}
.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: flex-end;        /* will work when items have wrapped */
  align-items: flex-end;          /* adjusted; works when items in one line */
  background-color: red;
}
.row-test {
  min-height: 200px;
}
span {
  width: 30%;
  background-color: orange;
  /* align-self: flex-end;     this would also work on single line container */
}
<body class="column">
  <section class="row row-test">
    <span>Test Test Test Test Test Test Test Test Test</span>
    <span>Test Test Test Test Test Test Test Test Test Test Test 
          Test Test Test Test Test Test Test Test Test Test Test</span>
  </section>
</body>

Ответ 2

Может быть, вы хотите использовать justify-content вместо align-content

Ответ 3

Вам нужно добавить flex-wrap: wrap; для работы с выравниванием

Ответ 4

Иногда вам нужно установить высоту родительского контейнера для ваших flex-элементов, чтобы выровнять контент для работы.