Как построить сетку каталога товаров на flexbox?

Всем привет

Очень сильно туплю и не могу сообразить как сделать простую сетку для каталога товаров по три товара в строке на flexbox, помогите разобраться, плиз)

Вот как делаю - https://codepen.io/anon/pen/OEogPX

Но помещается только 2 товара а из-за margin-bottom у третьего блока, он уже перелезает на следующую строку.

Как сделать, чтобы всё же по 3 товара было и крайний третий был прижат к правому краю?
  • Вопрос задан
  • 1852 просмотра
Решения вопроса 1
@TheUnchainedPug
Для родительского блока:
justify-content: space between
Для дочернего:
width: calc(33.3333% - {твой отступ})
flex: 0 0 calc(33.3333% - {твой отступ})
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Для обертки задаём justify-content: space-between
Для items задаем нужную ширину ( через max-width или рассчитать в процентах), так же убираем margin-right
Последнему item задаем marign-left: auto
https://jsfiddle.net/z0s7k3qe/
Ответ написан
Ваш ответ на вопрос

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

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