如何将项目与弹性容器的开始和居中对齐？

Question

我试图水平对齐弹性容器，同时保持它们的项目与开头对齐。 ~~我正在尝试align-content: flex-start在使用justify-content: center.~~

现在，如果最后一行的项目较少，它将以弹性容器为中心，而不是行的开头。

更新1

这是预期的结果：

Answer 1

justify-content和属性align-content只能应用于Flex 容器，但仅影响Flex 项目。因此，要将容器居中，您必须将其应用于( ，在本例中)justify-content: center的父级。.flex-containerbody

或者，您可以简单地使用auto边距.flex-container。

该align-content属性沿着 Flex 容器的横轴（在本例中为垂直平面）起作用，并且不需要修复您的布局。

尝试这个：

body {
  display: flex;
  justify-content: center;
}

.flex-container {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
}

或这个：

.flex-container {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   margin: 0 auto;
}

更新（基于评论）

要解决容器右侧额外空白的问题，请参见此处：