gpt4 book ai didi

html - 使用 CSS 的等距对象

转载 作者:太空宇宙 更新时间:2023-11-04 11:37:40 24 4
gpt4 key购买 nike

我读得很棒article并对 Flexbox 对齐方法感到惊讶。它工作得很好,但只有当元素完全适合容器时。我创建了 jsfiddle来说明这一点。

#container {  
text-align: justify;
font-size: 0.1px; /* IE 9 & 10 don't like font-size: 0; */
min-width: 600px;
}

如何使用此方法将第 6 个元素放在第 5 个元素之后而不添加额外的标记?

最佳答案

宽度之和不能超过父级的宽度,否则它们之间将没有剩余空间可分配。固定(像素)宽度并不总是适用于调整大小。如果您的六个元素每个都是 150 像素,并且容器的宽度是 800 像素,那么除了进入下一行之外别无他法。

正如您文章的作者所说:它更复杂。要保持这种状态,您可以使用 calc()让它充满活力。这只是一个例子:

.flex-item{
width: calc((100% / 6) - 20px); // 100% width ÷ 6 items - 20px space
}

这是一个更新的 fiddle :https://jsfiddle.net/gy04jqdk/

无论如何,flexbox 魔法以其纯粹的形式被人们津津乐道。您可以使用 justify-content:space-between 实现相同的效果.要使其全部正常工作,您还必须将 display:flex 添加到父容器。这将使它成为一个 flexbox 及其直接子项 flex-items。您的更改范围可能限于:

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

对于元素排列的可视化说明,article at CSS-Tricks是众所周知的。您可能还对 space-around 感兴趣,这是 justify-content 的另一个值。

此外,这里有一个固定宽度和均匀分布空间的 fiddle :https://jsfiddle.net/fdrgw3eu/

关于html - 使用 CSS 的等距对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31615173/

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