使用 flexbox 实现某个网格 [重复]答案

【问题标题】：Achieving a certain grid using flexbox [duplicate]使用 flexbox 实现某个网格 [重复]
【发布时间】：2016-11-13 18:53:32
【问题描述】：

我正在使用 flexbox 为我的网站创建一个网格。网格用于文章存档，每行应显示 3 篇文章，每篇文章之间有边距。

问题是：我需要文章框从行首开始并恰好在行尾结束。所以显而易见的事情是使用justify-content: space-between;，我这样做了。所以这个，除了flex-wrap: wrap 创建了我需要的网格。直到我有奇数篇文章。然后justify-content 属性在行中间留了一个空格，如下例所示：

http://codepen.io/Naxon/pen/NbNXVj

对我来说很重要的一点是，无论容器的宽度是多少，项目都会从头开始，并在结尾结束。

我怎样才能做到这一点？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

Flexbox 不支持项目间填充，但我们可以使用 calc() 和 margin 来伪造它。 Codepen

.container {
  width: 800px;
  height: 800px;
  background-color: blue;
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
}

.item {
  width: 150px;
  height: 150px;
  background-color: green;
  /* margins */
  margin-left: 10px;
  /* figure out width taking margins into account */
  flex-basis: calc((100% - 20px) / 3);
}
/* clear margin on every third item starting with the first */
.item:nth-child(3n+1) {
  margin-left: 0;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

【讨论】：