将元素推送到下一行时保持间距

Question

我经常遇到一个问题，即一行中的所有按钮都没有足够的空间。以这把小提琴为例。如果有足够的空间，则所有元素都垂直居中。如果谎言破裂，它们会被推到下一行，但它们之间没有保持适当的垂直间距。

我通常采用的解决方法是向按钮添加底部边距并从容器中删除底部填充。 这就是我的意思。

但是现在我不能将我的容器(.controls class)与其他元素重用，因为并非所有元素都包含进入下一行的按钮。

有没有办法保持容器padding:10px;并在按钮之间有一个垂直间距的漂亮换行符？

.controls {
text-align: center;
background-color: rgb(217, 241, 238);
padding: 10px 10px 10px 10px;
}
button {
font-size: 14px;
background-color: rgb(181, 220, 216);
border: none;
padding: 0.5em 1em;
}

<section class="controls">
<button id="new-file">New File</button>
<button id="open-file">Open File</button>
<button id="save-markdown" disabled>Save File</button>
<button id="revert" disabled>Revert</button>
<button id="save-html">Save HTML</button>
<button id="show-file" disabled>Show File</button>
<button id="open-in-default" disabled>Open in Default Application</button>
</section>

Answer 1

步骤：

• 在容器上设置display: flex; justify-content: center; flex-wrap: wrap;，使其居中并根据需要跨行换行。
• 在按钮上设置margin: 0.5em;(或您喜欢的任何值)，以将它们水平和垂直间隔开来。
• 为了进行测试，请将resize: horizontal; overflow: auto;添加到容器中，以便您可以实时看到它进行调整。在实际代码中不需要这些。您可以改为调整浏览器大小。

请求的解决方案(以确保我正确理解问题)：

• 保留容器padding:10px;- 不完整
  • 感谢@TemaniAfif指出 OP 试图将视觉填充保持在 10px。当 OP 要求我们不要更改容器的填充(例如将底部归零)时，这就是这个问题的棘手部分。
  • 经过一个小时左右的研究，我认为这在flexbox是不可能的。display: grid接近grid-gap但它需要子元素的结构化大小调整。有关已知问题和相关问题的黑客，请参阅下面的链接，但它们都无法通过此问题中的容器填充限制......
• 有一个很好的换行符 - 完成
• 按钮之间的垂直间距 - 完成

.controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: space-between;
background-color: rgb(217, 241, 238);
/* must be 10px for all sides; must appear 10px visually */
padding: 10px;
resize: horizontal;
overflow: auto;
}
button {
font-size: 14px;
background-color: rgb(181, 220, 216);
border: none;
padding: 0.5em 1em;
/* while this spaces buttons from each other, it also adds visual space to the container padding */
margin: .5em;
}

<section class="controls">
<button id="new-file">New File</button>
<button id="open-file">Open File</button>
<button id="save-markdown" disabled>Save File</button>
<button id="revert" disabled>Revert</button>
<button id="save-html">Save HTML</button>
<button id="show-file" disabled>Show File</button>
<button id="open-in-default" disabled>Open in Default Application</button>
</section>

相关链接：

• https://github.com/w3c/csswg-drafts/issues/592
• 设置弹性框项目之间距离的更好方法
• https://oliverjash.me/2016/12/28/gutters-for-flexible-components-with-sliced-padding
• https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 2

这是在flexbox存在之前的做法：

.controls {
text-align: center;
background-color: rgb(217, 241, 238);
padding: 10px 10px 5px;
}

button {
font-size: 14px;
background-color: rgb(181, 220, 216);
border: none;
padding: 0.5em 1em;
margin: 0 5px 5px 0;
}

<section class="controls"
><button id="new-file">New File</button
><button id="open-file">Open File</button
><button id="save-markdown" disabled>Save File</button
><button id="revert" disabled>Revert</button
><button id="save-html">Save HTML</button
><button id="show-file" disabled>Show File</button
><button id="open-in-default" disabled>Open in Default Application</button
></section>

上述技术的问题在于您需要严格控制元素之间的空格。在您的示例中，">适当的">水平间距是"不正确的"。它来自这样一个事实<button>默认情况下具有display:inline，并且>和下一个<之间的空格/制表符/返回符被浏览器呈现为空格(如单词之间的空格)。

这样做的"正确"方法是使用margin来控制项目之间的空间，精确到像素。

---

但那些时代已经一去不复返了。今天实现相同结果的真正正确(和现代)方法是使用 flexbox：

.controls {
background-color: rgb(217, 241, 238);
padding: 7.5px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}

button {
font-size: 14px;
background-color: rgb(181, 220, 216);
border: none;
padding: 0.5em 1em;
margin: 2.5px;
}

<section class="controls">
<button id="new-file">New File</button>
<button id="open-file">Open File</button>
<button id="save-markdown" disabled>Save File</button>
<button id="revert" disabled>Revert</button>
<button id="save-html">Save HTML</button>
<button id="show-file" disabled>Show File</button>
<button id="open-in-default" disabled>Open in Default Application</button>
</section>

我发现弹性框技术更干净，更易于控制/维护/缩放。