css - 如何仅在包装Flexbox的除第一项和最后一项以外的所有元素上设置边距

假设我有一份包含多个行的包装清单。然后，我想在所有项目之间添加一个间隙。但是，我不想在每行的第一项之前有一个空格，而在每行的最后一项之后没有任何空格。

您可以通过每行具有明确的项目数来实现此目的，但是我希望每行的项目数是动态的。

到目前为止看起来像这样，但是我还无法弄清楚如何使它在两侧没有边距地工作。

.a {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background: yellow;
}

.b {
  width: 50px;
  margin: 5px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
}

<div class='a'>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
</div>

注意每行开头的空格。我不想有任何空间。想知道如何做到这一点。

与垂直相同。我不希望整个内容的顶部和底部都有空间，而只是内部元素之间的空间。

最佳答案

将列表包装在容器div中，为列表提供负的边距以抵消列表项的边距，并在容器中隐藏溢出：

.c {
  overflow: hidden;
}

.a {
  margin: -5px;
}

/* your original CSS */

.a {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background: yellow;
}

.b {
  width: 50px;
  margin: 5px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
}

<div class='c'>
  <div class='a'>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
  </div>
</div>

关于css - 如何仅在包装Flexbox的除第一项和最后一项以外的所有元素上设置边距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56465430/