justify-content属性值（水平对齐）
| 值 | 描述 | 白话文 |
|---|---|---|
| flex-start | 默认值。项目位于容器的开头。 | 让子元素从父容器的开头开始排序 |
| flex-end | 项目位于容器的结尾。 | 让子元素从父容器的后面开始排序 |
| center | 项目位于容器的中心。 | 让子元素在父容器中间显示 |
| space-between | 项目位于各行之间留有空白的容器内。 | 左右的盒子贴近父盒子，中间的平均分布空白间距 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | 相当于给每个盒子添加了左右margin外边距 |
html案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 60%;
height: 250px;
border: 2px solid pink;
margin: 100px auto;
/*display: flex;*/
/*justify-content: flex-start; 让子元素从父容器的开头开始排序 但是盒子顺序不变*/
/*justify-content: flex-end; 让子元素从父容器的后面开始排序 但是盒子顺序不变*/
/*justify-content: center; 让子元素从父容器中间显示*/
/*justify-content: space-between; 左右的盒子贴近父盒子，中间的平均分配空白间距*/
/*justify-content: space-around; 相当于给每个盒子添加了左右margin外边距*/
}
div{
width: 250px;
height: 100%;
}
div:first-child{
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}
div:nth-child(3){
background-color: skyblue;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
1.案例效果图（无display:flex;）
pic1.png
2.justify-content: flex-start;效果图
pic2.png
3.justify-content: flex-end;效果图
pic3.png
4.justify-content: center;效果图
pic4.png
5.justify-content: space-between;效果图
pic5.png
6.justify-content: space-around;效果图
pic6.png
如有错误或建议欢迎大家指出与评论哈，希望这篇博文能帮助到大家，也可以分享给需要的人。
如需转载，请注明出处。https://www.jianshu.com/p/94552fff8503
