html - 当元素被推到下一行时保持间距

Question

我经常遇到一个问题，即一行中的所有按钮都没有足够的空间。取this fiddle for example .如果有足够的空间，所有元素都垂直居中。如果谎言被打破，它们会被推到下一行，但它们之间不会保持适当的垂直间距。

我通常采用的修复方法是向按钮添加 margin-bottom 并从容器中删除 padding-bottom。 this is what I mean .

但现在我不能将我的容器(.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

步骤:

• 设置显示:flex；证明内容:居中； flex-wrap: wrap; 在容器上使其居中并根据需要将元素换行。
• 在按钮上设置 margin: 0.5em;(或您喜欢的任何值)，使它们在水平和垂直方向上彼此间隔开。
• 为了测试，添加了 resize: horizo​​ntal; overflow: auto; 到容器，这样你就可以实时看到它的调整。在您的实际代码中不需要这些。您可以改为调整浏览器的大小。

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

• 保留一个容器 padding:10px; - 不完整
  • 感谢@TemaniAfif 指出 OP 试图将视觉填充保持在 10 像素。当 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
• > Better way to set distance between flexbox items
• > https://oliverjash.me/2016/12/28/gutters-for-flexible-components-with-sliced-padding
• > https://css-tricks.com/snippets/css/complete-guide-grid/