css - 如何在居中的 flexbox div 中左对齐元素？

<分区>

我是 flexbox 的新手，正在尝试理解它。我正在尝试将包含换行元素的 div 居中，但也在其中左对齐这些元素。

我这里有一个代码笔 (https://codepen.io/anon/pen/GOWBxY)，但所有元素都居中!

body {
  margin: 0px;
}

.container .card {
  padding: 20px 20px;
  margin: 1em;
  background: #ff6a6a;
}

.container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  background: #f5f5f5;
  padding: 50px 0px;
  width: 100%;
}

.cardTitle {
  height: 75%;
}

.card {
  min-height: 8em;
  width: 25%;
  box-shadow: 0 0 1em #ccc;
}

<div class="container">
  <div class="card">
    <div class="cardTitle">Hi</div>
  </div>
  <div class="card">
    <div class="cardTitle">Hi</div>
  </div>
  <div class="card">
    <div class="cardTitle">Hi</div>
  </div>
  <div class="card">
    <div class="cardTitle">Hi</div>
  </div>
  <div class="card">
    <div class="cardTitle">Hi</div>
  </div>
</div>

最佳答案

justify-content 用于对齐其子元素，而不是元素本身。

正如@VXp 已经说过的，您可以注释掉 justify-content: center，因为 justify-content: flex-start 已经是默认值。

此外，如果你想将 .container 居中，