html - 我怎样才能居中 flex-wrap 行，同时保持 flex 元素左对齐？

Question

像这样:

justify-content: center; 让我很接近，但这使 flex 容器中的所有元素居中。我想让元素左对齐，同时将包裹的行居中放置在这些元素下方。

Answer 1

如果容器本身或 flex 元素的宽度固定/已知，则可以模拟它。您只需要将 flex-container 包含在另一个元素中，然后以某种方式将其左对齐。然后你可以居中对齐 flex 元素。

Codepen here

ul {
  width: auto;
  max-width: 600px;
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
li {
  width: calc((100% / 3) - 20px);
  height: 80px;
  background: #333;
  margin: 10px;
}