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

问题描述 投票:1回答:3

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

谢谢您的帮助。

html css flexbox css-grid
3个回答
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

0
投票

去掉

flex-grow:1;

它们的大小相同!


0
投票

我不知道它是你想要的,只需在类文章中添加属性:

justify-content: space-around;

要么

justify-content: space-between;

差距将消失。

© www.soinside.com 2019 - 2024. All rights reserved.