gpt4 book ai didi

html - 证明内容 : space-between with equal space between first and last items also

转载 作者:搜寻专家 更新时间:2023-10-31 08:24:38 25 4
gpt4 key购买 nike

<分区>

我想使用 flexbox 来设置一个简单的 elastic* 网格...

.container{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

...但是我希望外边距等于元素之间的空间。

*“flex ”是指宽度不固定。它们都是百分比,因此在不同的屏幕宽度下总宽度不同。

这似乎不是 justify-content: space-between 的默认行为。它在每个元素“周围”生成相等的空间,但空间不会像边距那样折叠。所以结果是“中间”空间的宽度是最右边和最左边的两倍(假设你的 flex-direction 是 row)。

在下面的草图中,第一个图是 justify-content: space-between 自然而然地做的。注意宽度 A 和 B。第二个图表是我想要的(只有一个一致的装订线 C)。

这可以用 flexbox 实现吗?

enter image description here

更新

如果可能,我想避免添加“行”包装元素。伪元素解决方案听起来就像票(请参阅下面的答案),但让我们解决这个问题,以便元素可以是一个不确定的数字(并换行到新行)

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