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

Question

我是flexbox的新手，并试图理解它。我试图将包含包含元素的div居中，但也将这些元素左对齐。

我在这里有一个codepen（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％。