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

时间:2018-09-04 12:31:22

标签: html css flexbox css-grid

我正在使用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/

除此以外,并非所有元素都具有相同的大小。

这是一张说明我的问题的图片

enter image description here

有什么方法可以使用flexbox吗?

谢谢您的帮助。

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

删除

flex-grow:1;

它们的大小将相同!

答案 2 :(得分:0)

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

null

justify-content: space-around;

差距将消失。