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

Question

[BarneyGumble]

Всем привет

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

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

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

Как сделать, чтобы всё же по 3 товара было и крайний третий был прижат к правому краю?

Answer 1

[TheUnchainedPug]

Для родительского блока:
justify-content: space between
Для дочернего:
width: calc(33.3333% - {твой отступ})
flex: 0 0 calc(33.3333% - {твой отступ})

Comments

[BarneyGumble]

Получилось, но немного с другими цифрами :) - https://codepen.io/anon/pen/OEogPX

Спасибо за наводку!

Answer 2

[Александр]

Для обертки задаём justify-content: space-between
Для items задаем нужную ширину ( через max-width или рассчитать в процентах), так же убираем margin-right
Последнему item задаем marign-left: auto
https://jsfiddle.net/z0s7k3qe/

Comments

[BarneyGumble]

Я тоже думал сначала в сторону justify-content: space-between, но мне нужны фиксированные отступы справа у товаров