Почему не работает align-content, когда одна строка?

Question

[Александр]

Т.е. если всего один элемент внутри Flex, он не выравнивается. Добавляем второй и все хорошо. в FF работает все нормально.

<div class="flex-container">
   <div class="red"></div>
  </div>

.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;
   }
   .red { background: red; }

Comments

[lemonlimelike]

а обязательно использовать свойство align-content для одного элемента? align-items:center и все норм работает

Answer 1

[Владимир Проскурин]

Используйте не align-content, а align-items
UPD: align-content используется для выравнивания элементов при переносе на следующие строки (с flex-wrap: wrap).

Comments

[Иван Доброславин]

большое спасибо

Answer 2

[Senseich]

Вот здесь точное определение написано: https://puzzleweb.ru/css/pr_align-content.php
Работает для нескольких элементов или строк