按钮到最边缘，删除边距

Question

我有一个问题：如何在保持按钮之间的边距的同时将按钮设置到蓝色边框的边缘？如何从右侧和底部删除边距。 我使用flexbox，它工作正常，但我不知道如何删除此边距。 我想删除以绿色标记的边距，

.container {
  width: 80%;
  border: 1px solid blue;
  display: flex;
  flex-wrap: wrap;
}

button {
  margin-right: 2em;
  margin-bottom: 2em;
}

<div class="container">
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
</div>

Answer 1

使用flexbox实现这一目标非常具有挑战性，因为没有内置的flexbox功能可以在列之间产生间隙。

Better way to set distance between flexbox items

但是，如果您使用grid，则可以轻松实现。

.container {
    width: 80%;
    border: 1px solid blue;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 2em;
}

<div class="container">
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
  <button>Text</button>
</div>