我正在使用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吗?
谢谢您的帮助。
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
去掉
flex-grow:1;
它们的大小相同!
我不知道它是你想要的,只需在类文章中添加属性:
justify-content: space-around;
要么
justify-content: space-between;
差距将消失。