Устранить пробел в многострочном контенте flexbox с нечетными строками - PullRequest
0 голосов
/ 07 мая 2018

У меня есть сетка плиток товаров, которые я отображаю с помощью flex, чтобы получить равную высоту на основе этого кода: https://codepen.io/imohkay/pen/gpard
Они 3-х шириной. Однако в последнем «ряду», когда осталось только 2 плитки, последняя плитка перемещается вправо, как если бы было 3 плитки. Я не могу определить правильную настройку CSS, чтобы она была во втором столбце.

Снимок экрана: https://pasteboard.co/Hk699jP.png

#products {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: stretch;
}

.product {
    width: 33.3%;
}

1 Ответ

0 голосов
/ 07 мая 2018

Они выталкиваются друг от друга, потому что вы используете опцию space-between в свойстве justify-content.

Либо измените space-between на flex-start, либо переключите display на grid.

Скрипка (flex-box https://jsfiddle.net/swordys/db7dzkcx)

Скрипка (grid https://jsfiddle.net/swordys/65cyr3tu/)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...