Flexbox使用大小相同的元素来证明包装内容的合理性

Question

我正在使用CSS-Grid来创建一个最小宽度为35px的元素列表，并且如果您调整窗口的大小，其大小将适应，以便始终将尽可能多的元素放入一行，并且使用此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

Already has an answer here

Working example from the answer above

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

删除

flex-grow:1;

它们的大小将相同！

Answer 3

我不知道这是不是您想要的，只需在课程文章中添加属性即可：

null

或

justify-content: space-around;

差距将消失。