如何在 flex 容器中居中对齐 div 网格？答案

【问题标题】：How to center align a grid of divs in a flex container?如何在 flex 容器中居中对齐 div 网格？
【发布时间】：2017-06-24 21:49:32
【问题描述】：

我正在尝试将放置在flex-containerdiv 中的 3 列网格（由 6 个flex- items 组成）居中对齐。（参考附图）

我厌倦了float 和align-content 的许多变体。我还尝试将弹性项目放在子容器中，但无法使其工作。

这是我目前拥有的：

.flex-container {
  flex-direction: row;
  display: -webkit-flex;
  display: inline-flex;
  background-color: #f5f7f9;
  width: 100%;
  align-content: center;
  flex-flow: row wrap;
  margin-top: 100px;
}
.flex-item {
  width: 23%;
  height: 360px;
  margin: 10px;
  order: 1;
  border-radius: 3px;
  padding: 0 10px 40px 10px;
}
.colour-1 {
  background-color: #8c72cb;
}
.colour-2 {
  background-color: #54c7ec;
}
.colour-3 {
  background-color: #a3cedf;
}
.colour-4 {
  background-color: #b9cad2;
}
.colour-5 {
  background-color: #6bcebb;
}
.colour-6 {
  background-color: #a3ce71;
}

<div class="flex-container">
  <div class="flex-item colour-1"></div>
  <div class="flex-item colour-2"></div>
  <div class="flex-item colour-3"></div>
  <div class="flex-item colour-4"></div>
  <div class="flex-item colour-5"></div>
  <div class="flex-item colour-6"></div>
</div>

IMAGE

谢谢。

【问题讨论】：

标签： html css grid alignment center

【解决方案1】：

您可以在 flex 容器上使用 justify-content 来将项目在其主轴上对齐。看看这个例子：https://jsfiddle.net/eL650y3e/

来源：

【讨论】：

【解决方案2】：

我会尝试设置 margin:auto; `

.flex-item {
    width: 23%;
    height: 360px;
    margin: 10px;
    order: 1;
    border-radius: 3px;
    padding: 0 10px 40px 10px;
    margin:auto;
}`

【讨论】：