Как сделать одинаковый отступ между элементами, но кроме краев контейнера?

#html #css #css3 #html5 #flexbox

(1 картинка)

У контейнера может меняться ширина. У элементов фиксированная ширина 75px, margin-left
20px. Как можно сделать, что бы элементы равномерно распределились?

ссылка на мою разметку: 

https://jsfiddle.net/mefpu0k6/1/ 




Если делать через flex-wrap и space-between, то у последних элементов margin-left
не такой как у всех (2 картинка)



А нужно сделать как на 3 картинке. Т.е margin-left у всех одинаковый

Мне удалось это сделать, но только с помощью js 

`https://jsfiddle.net/u1yub2jq/2/`


Можно ли это сделать без помощи js? Или что делать с лишним пространством справа?

При этом, когда меняется ширина элементы переходят на новую строку.
    

Ответы

Ответ 1

Не флексбоком единым. Есть ещё грид.



.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 75px);
  grid-gap: 20px;
  justify-content: space-between;

  width: 500px;
  border: 1px solid black;
  resize: horizontal;
  overflow: hidden;
}

.block {
  background-color: red;
  color: white;
  width: 75px;
  height: 75px;
  font: 20px sans-serif;
  line-height: 75px;
  text-align: center;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8





Подробный разбор всех вариантов размещения ячеек с разнообразными выравниваниями
можно найти в статье 
Красивое выравнивание блоков по резиновой сетке. По-новому
.


Ответ 2

#wrapper {
  display: flex;
  width: 480px;
  height: 220px;
  background: rgba(205, 115, 12, 0.1);
  border: 0.1px solid rgba(205, 115, 12, 1);
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  align-content: space-between;
}

.block {
  width: 100px;
  height: 100px;
  background: orange;
}