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>

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

1 个答案: