我是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>
答案 0 :(得分:1)
justify-content
用于证明其子元素,而不是元素本身。
正如@VXp已经说过的那样,您可以注释掉justify-content: center
,因为justify-content: flex-start
已经是默认值。
此外,如果您想将.container
,
添加margin: 0 auto
或者您可以将display: flex
和justify-content: center
提供给您案例中body
的父元素。
虽然您的.container
似乎不会居中,因为其width
值为100%。