CSS-弹性网格布局

Question

我有一个使用flex的简单网格。

我需要三列，并且在每个块之间有一个空白，但不在每行的最后一个块上。

这在这里起作用，但是我还需要所有块都占容器的100％，所以我不希望在第三个块之后留有边距。

是否可能有一个像这样的网格，其中块是一个百分比，内部是边距，而不是靠着容器。

.block {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  justify-content: flex-start;

}

.block__item {
  background: grey;
  height: 20px;
  margin-bottom: 2px;
  width: calc(33.33% - 2px);
  margin-right:2px;  
}

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

Answer 1

.block {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  justify-content: flex-start;

}

.block__item {
  background: grey;
  height: 20px;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  flex-grow: 1;
  flex-shrink: 0;
}

.block__item:last-of-type {
  border-right: none; 
}

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>
<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>
<div class="block">
  <div class="block__item"></div>
</div>

Answer 2

使用last-child / nth-child从每行的最后一个元素中删除边距，然后依靠flex-basis / flex-grow设置宽度：

.block {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  justify-content: flex-start;
  margin:10px 0;

}

.block__item {
  background: grey;
  height: 20px;
  margin-bottom: 2px;
  flex-basis:26%; /*Smaller than 33% and bigger than 25%*/
  flex-grow:1;
}
.block__item:not(:last-child):not(:nth-child(3n+3)) { 
  margin-right:2px;
}

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>
<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>