Flexbox -对齐-内容中心项目安排

Question

我现在遇到的问题是，如果项目小于容器的宽度，justify-content:center将不会从左边对齐项目。

下面是我所得到和期望的输出：

​

上面是我现在得到的，这是到小提琴的链接。

​

.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
  border:1px solid black;
  width:60%;
  justify-content:center;
}
.flex-item-blue {
  background-color: blue;
  padding: 10px;
}
.flex-item-grey {
  background-color: grey;
  padding: 10px;
}

<div class="flex-container">
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
</div>

​

底部是我想要输出的结果。

Answer 1

您可以通过设置

flex-wrap: wrap; 
justify-content: flex-start; 

编辑

查看到新答案https://jsfiddle.net/tcqpxf24/3/的链接

我所做的就是添加第二个div，充当flex子级的父级，然后对其进行样式化，这样它就有理由在顶部div的中间进行居中。我将justify-content: center;添加到顶级div中。现在看起来是这样的！

​

Answer 2

如果您不希望在不同的窗口大小上有额外的空间，下面是另一种使用grid的方法：

.flex-container {
  display: grid;
  font-size: 30px;
  text-align: center;
  border: 1px solid black;
  grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
}

.flex-item-blue {
  background-color: blue;
  padding: 10px;
}

.flex-item-grey {
  background-color: grey;
  padding: 10px;
}

<div class="flex-container">
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
</div>

​

如果您想要侧空间，只需将类似padding: 0 10px;的内容应用于主容器。