@YakovSpb

Почему блок на флексах не заполняет пустоту по вертикале?

5d8a240880d96534292315.jpeg

родитель
.store-window-wrapper {
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

Item
.store-window__item {
-webkit-flex-basis: auto;
-ms-flex-preferred-size: auto;
flex-basis: auto;
width: 50%;
}
  • Вопрос задан
  • 352 просмотра
Решения вопроса 1
Почему блок на флексах не заполняет пустоту по вертикале?

Потому что для родителя заданы свойства align-items: flex-start; и align-content: flex-start;, что прижимает дочерние элементы к началу блока, не давая заполнять пространство по вертикали.
А из-за разного размера картинок, дочерние блоки занимают разную высоту.

P.S. Выложите более полный фрагмент кода, чтобы показать решение на нём.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
criticalsomethoughts
@criticalsomethoughts
UI\UX Developer, Project Manager
Если мне не врут глаза, которые ломаются от вашего "форматированного" кода -
align-content: flex-start;
- вы выравниваете ваш контент по вертикали начиная с позиции start, по умолчанию align-items: stretch - растягивает.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы