css - 如何仅对包装 Flexbox 中除第一个和最后一个元素之外的所有元素设置边距

Question

假设我有一个跨越多行的元素包装列表。然后我想在所有元素之间添加一个间隙。但是，我不希望每行的第一项之前有空隙，而每行的最后一项之后没有空隙。

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

到目前为止它看起来像这样，但我一直无法弄清楚如何让它在两侧没有边距的情况下工作。

.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>

注意每行开头的空格。我不希望有任何空间。想知道如何实现这一目标。

与垂直相同。我不想要整个东西的顶部和底部有空间，只想要内部元素之间的空间。

Answer 1

将您的列表包裹在容器 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>