html - 使用 CSS 的等距对象

Question

我读得很棒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 个元素之后而不添加额外的标记？

Answer 1

宽度之和不能超过父级的宽度，否则它们之间将没有剩余空间可分配。固定(像素)宽度并不总是适用于调整大小。如果您的六个元素每个都是 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/