justify-content属性控制子元素在主轴上的对齐方式,支持flex-start 、 flex-end 、 center 、 space-between 、 space-around对齐方式。
可选值 | 说明 |
---|---|
flex-start | 默认值,向主轴start位置对齐,当flex-direction:row 时可以理解成左对齐 |
flex-end | 向主轴end位置对齐,当flex-direction:row 时可以理解成右对齐 |
center | 居中对齐 |
space-between | 两边对齐,每个子元素的间隔相等 |
space-around | 每个子元素的间隔相等,因此子元素的间隔比子元素与边框的间隔大一倍 |
<style>
.boxs
{
width:80%;
height:100px;
border:1px solid #333;
display:flex;
justify-content:flex-star;
}
.boxs div
{
width:20%;
}
</style>
<div class="boxs">
<div style="background-color:#ffc5c5;" >子元素A</div>
<div style="background-color:#7171f7;" >子元素B</div>
<div style="background-color:#c6d8c6;" >子元素C</div>
<div style="background-color:#c9b0fb;" >子元素D</div>
</div>
例子
例子
例子
例子
例子