与flexbox左对齐和居中网格

我想用flexbox实现响应式网格状布局（无媒体查询）。 网格中可以有可变数量的元素。 每个项目应该有固定和相等的宽度。 项目应该对齐到左侧。 整个组应具有相等的左右边距。

它应该是这样的：

这是我试图实现它的方式：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: auto;
}
.item {
  height: 200px;
  width: 200px;
  background-color: purple;
  padding: 10px;
  margin: 10px;
}

<div class="container">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">Flex item 4</div>
  <div class="item">Flex item 5</div>
</div>

---

开箱即用的Flexbox无法实现这一点（至少我没有设法做到这一点）。 你可以尝试使用justify-content: center; 但是这会使所有的childer居中，你会得到如下的东西：

所以我设法找到的唯一解决方案是使用另一个父元素并将其中的所有内容都包含进去。

请看这个CodePen http://codepen.io/justd/pen/rOeMGZ

我相信你会找到适合你的东西，只是尝试结合不同的CSS技术。

---

一个非常简单的解决方案就是在常规项目的最后添加很多隐形的零高度项目：

<div class="parent">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="dummyItem"></div>
  <div class="dummyItem"></div>
  <div class="dummyItem"></div>
  <div class="dummyItem"></div>
</div>

和

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.parent .item,
.parent .dummyItem{
  width: 50px;
  height: 50px;
  background: white;
  margin: 5px;
}

.parent .dummyItem {
  height: 0;
}

如果你最长的一行可以有n可见项目，你至少需要n-1虚拟项目才能工作。

唯一有点不同的是，如果只有一行，则这些项目实际上不会居中; 相反，它们将（大致）向左对齐。

链接到Codepen。

---

如果在容器上设置了明确的宽度，则可以将margin: 0 auto应用于包含元素，因为它不再跨越窗口的整个宽度。

以下是您正在寻找的Codepen示例：http://codepen.io/alexverner/pen/MaExqb

链接地址: http://www.djcxy.com/p/76047.html

上一篇: Left aligned and centered grid with flexbox

下一篇: Can I stop 100% Width Text Boxes from extending beyond their containers?