gpt4 book ai didi

html - 包裹时均匀分布 flex 元素

转载 作者:太空狗 更新时间:2023-10-29 13:53:17 25 4
gpt4 key购买 nike

当我的 flexbox 容器有超过一定数量的元素时,我希望它使用多行。这是我目前的解决方案:

.container {
display: flex;
width: 400px;
background: black;
padding: 6px;
margin: 10px;
flex-wrap: wrap;
}
.box {
flex: 1 1 0;
height: 32px;
flex-grow: 1;
min-width: 15%;
border: solid 1px black;
}
.box:nth-child(even) {
background: blue;
}
.box:nth-child(odd) {
background: red;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

http://codepen.io/samkeddy/pen/mOwZBv?editors=1100

问题是最后一行中的元素被拉伸(stretch)以填满该行。

我想要的是它在行之间均匀分布元素,以便每个元素尽可能接近相同的大小。

例如,每行最多有 6 个元素。当你有 8 个元素时,它会将 6 放在第一行,将 2 放在第二行。我希望它每行放 4 个。

这可以用 flexbox 实现吗?这有可能吗?

最佳答案

实际上有一个技巧可以做到这一点:向容器中添加一个伪元素,并为其指定 50 左右的 flex-grow。这将创建一个假装元素来填充其余空间。请注意,我删除了 border 规则,因为它计入元素的宽度并与 flex-basis 冲突。

这里是修改后的例子:https://codepen.io/walidvb/pen/ZXvLYE

关于html - 包裹时均匀分布 flex 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40809135/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com