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

Question

我有 this plunker this plunker。

我尝试水平对齐Flex容器，同时保持其项目与开头对齐。 我在使用align-content: flex-start时试图justify-content: center。

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

更新1

以下是预期结果：

Answer 1

justify-content和align-content属性只能应用于 Flex容器，但仅影响 flex项。因此，要将容器居中，您必须将justify-content: center应用于.flex-container的父级（在这种情况下为body）。

或者，您只需在.flex-container上使用auto margins。

align-content属性沿着flex容器的横轴（在本例中为垂直平面）工作，不需要修复布局。

试试这个：

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

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

modified plunker demo

或者这个：

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

modified plunker demo

更新（基于评论）

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

• How to center a flex container but left-align flex items
• Center align container and left align child elements
• Left aligned last row in centered grid of elements