gpt4 book ai didi

html - 使用 space-between 和 margins 左对齐 flexbox 的最后一行

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

<分区>

我在一个容器中有未知数量的元素,需要在外部没有边距的情况下进行包装,但它们之间的边距最小。

我还需要用 space-between 和最后一行左对齐来证明这些。

我正在尝试像这样使用 flexbox 来做到这一点:

.outside {
border: 1px solid black;
}
.container {
margin: -5px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container:after {
content: '';
flex: auto;
}
.box {
background: red;
width: 50px;
height: 50px;
margin: 5px;
}
<div class="outside">
<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 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 class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>

View JSFiddle

这工作正常,除了最后一行的间距关闭,如您在屏幕截图中所见:

enter image description here

如果我们不知道会有多少列(使用 flexbox 或除 javascript 以外的其他东西),有什么方法可以让它工作吗?

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