如何在居中的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％。