justify-content属性

justify-content 用于设置或检索弹性盒子元素在主轴方向上的对齐方式。

属性值：flex-start

属性值：flex-end

属性值：center

属性值：space-between

属性值：space-around

通过具体代码示例各个属性值的效果。

HTML结构

<div class="container flex"><div class="items">A</div><div class="items">B</div><div class="items">C</div><div class="items">D</div><div class="items">E</div><div class="items">F</div><div class="items">G</div><div class="items">H</div>
</div>

CSS样式：

.container {display: flex;width: 1000px;height: 500px;background-color: gray;margin: 20px auto;
}.items {width: 300px;height: 100px;text-align: center;line-height: 100px;font-weight: 900;color: gray;
}.items:nth-child(1) {background-color: #ff0000;
}.items:nth-child(2) {background-color: #ffff00;
}.items:nth-child(3) {background-color: #ff00ff;
}.items:nth-child(4) {background-color: #0000ff;
}.items:nth-child(5) {background-color: #14a9ee;
}.items:nth-child(6) {background-color: #71a03b;
}.items:nth-child(7) {background-color: #c323eb;
}.items:nth-child(8) {background-color: #ffffff;
}

 

属性值：flex-start

描述：默认值。项目位于容器的开头。

.flex {flex-wrap: wrap;justify-content: flex-start;
}

属性值：flex-end

描述：项目位于容器的结尾。

.flex {flex-wrap: wrap;justify-content: flex-end;
}

属性值center

描述：项目位于容器的中心。

.flex {flex-wrap: wrap;justify-content: center;
}

属性值：space-between

描述：项目位于各行之间留有空白的容器内。

.flex {flex-wrap: wrap;justify-content: space-between;
}

属性值：space-around

描述：项目位于各行之前、之间、之后都留有空白的容器内。

.flex {flex-wrap: wrap;justify-content: space-around;
}