Flexbox выравнивает содержимое с одинаковыми размерами

Question

Я использовал CSS-Grid, чтобы составить список элементов с минимальной шириной 35 пикселей и размером, который бы адаптировался, если вы измените размер окна, так чтобы всегда как можно больше элементов могло поместиться в одной строке, и промежуток справа от строки всегда будет таким же, как был слева при использовании этого CSS:

article{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
  grid-gap: 5px;
}

div{
  height: 35px;
  background-color: lightblue;
}

Вы можете попробовать это здесь, изменив масштаб окна. https://jsfiddle.net/k36jy0ou/39/

Но из-за проблем с совместимостью я теперь хочу сделать то же самое поведение, используя flexbox. Я не очень хорошо знаю flexbox, но я довольно близко подошел к этому CSS:

article{
  display: flex;
  flex-wrap: wrap;
}

div {
  flex-grow: 1;
  min-width: 35px;
  max-width: 40px;
  background-color: lightblue;
  height: 35px;
  margin: 5px;
}

https://jsfiddle.net/k1tmfu7o/3/

За исключением того, что не все элементы имеют одинаковый размер, если вы делаете это следующим образом.

Вот изображение, объясняющее мою проблему

Есть ли способ сделать это с помощью flexbox?

Спасибо за вашу помощь.

Answer 1

Здесь уже есть ответ

Рабочий пример из ответа выше

код SASS

=flex-wrap-fix($flex-basis, $max-viewport-width: 2000px)
  flex-grow: 1
  flex-basis: $flex-basis
  max-width: 100%

  $multiplier: 1
  $current-width: 0px

  @while $current-width < $max-viewport-width
    $current-width: $current-width + $flex-basis
    $multiplier: $multiplier + 1

    @media (min-width: $flex-basis * $multiplier)
      max-width: percentage(1 / $multiplier)

ul
  display: flex
  flex-wrap: wrap

li
  // I want the width to be between the following two sizes
  min-width: 40px
  //max-width: 100px
  // this keeps all the elements the same size
  // **as long as they are on the same row**
  // but I want them to all the same width everywhere
  //flex: 1 0 0

  +flex-wrap-fix(100px)

// demo styles

ul, li
  margin: 0
  padding: 0
  list-style: none

ul
  background-color: tomato

li  
  .content 
    margin: .5em
    background-color: darkgreen

  // the image may have variable width, I want it to take the entire space calculated by flexbox
  img
    width: 100%
    opacity: .5

  figure, img
    margin: 0
    padding: 0

Answer 2

Я не знаю, хотите вы этого или нет, просто добавьте атрибут в статью класса:

justify-content: space-around;

или

justify-content: space-between;

Пробел исчезнет.

Answer 3

Удалить

flex-grow:1;

и они будут одинакового размера!