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

Question

[YakovSpb]

родитель
.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%;
}

Comments

[Ankhena]

Либо уберите align-items: flex-start; либо замените на stretch (это значение по умолчанию).
НО картинки-то разного размера, вряд ли это будет хорошо выглядеть.

Answer 1

[Рома Зварич]

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

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

P.S. Выложите более полный фрагмент кода, чтобы показать решение на нём.

Comments

[YakovSpb]

test4.prospekt.pro
выложил на сервак... в мозилл не заполняет пустое пространство, а в хроме вообще бардак

[Рома Зварич]

YakovSpb,

1) Из HTML-разметки убираете атрибут height: 752px;
2) У тега .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;

3) Следующим классам задаёте указанные свойства

.store-window__item .picture {
    position: relative;
    height: 0;
    padding-bottom: 60%;
}

.store-window__item .picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Результат

[YakovSpb]

А нужно то вот так:

[Рома Зварич]

YakovSpb, прилично Вы всех запутали. Отвечаю на Ваш заданный вопрос:

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

Flexbox является одномерной системой выравнивания. Все дочерние элементы Flexbox - одинаковы и не могут иметь разную высоту. Заполнить пустоту по вертикали так, как Вы указали, с помощью Flexbox невозможно в принципе. Можно конечно установить направление выстраивания дочерних элементов в колонку, но тогда нужно будет ограничивать общую высоту контейнера. А Вам это явно не подойдет.

Задать указанную сетку можно с помощью CSS Grid.
Надеюсь, Вы получили исчерпывающий ответ и вопрос можно закрывать.

[YakovSpb]

ну Grid, я понял не все браузеры поддерживают...

[Рома Зварич]

YakovSpb, если ответ помог, просьба пометить его решением

Answer 2

[Robert-critical-thoughts]

Если мне не врут глаза, которые ломаются от вашего "форматированного" кода -

align-content: flex-start;

- вы выравниваете ваш контент по вертикали начиная с позиции start, по умолчанию align-items: stretch - растягивает.

Comments

[YakovSpb]

test4.prospekt.pro
выложил на сервак... в мозилл не заполняет пустое пространство, а в хроме вообще бардак