如何在居中的弹性框 div 中左对齐元素

Question

我是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>

Answer 1

justify-content用于

证明其子元素的合理性，而不是元素本身。

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

另外，如果要使.container居中，

1. 添加margin: 0 auto

2. 或者，您可以display: flex并justify-content: center到在您的情况下body的父元素。

尽管您的.container似乎不会居中，因为它的width值为 100%。