一、基本概念
css justify-content属性定义了在一个容器中，如何将多个子元素沿着主轴进行排列，这决定了子元素在主轴上的对齐方式。
justify-content 可以取多个值，主要有：
- flex-start：子元素排列在容器的开始位置
- flex-end：子元素排列在容器的结束位置
- center：子元素居中对齐
- space-between：子元素平均分布在容器中，第一个子元素在开头，最后一个子元素在结尾
- space-around：子元素平均分布在容器中，两端留有空隙
如果容器只有一行，那么 justify-content 控制的就是水平的对齐方式；如果容器只有一列，则控制的是垂直的对齐方式。
二、实例演示
下面的代码演示了不同的 justify-content 属性值对子元素排列的影响:
.container {
display: flex;
flex-wrap: wrap;
height: 300px;
justify-content: flex-start;
}
.box {
width: 100px;
height: 100px;
background-color: #333;
margin: 10px;
}
原创文章，作者：NEKT，如若转载，请注明出处：https://www.506064.com/n/143990.html
微信扫一扫 
支付宝扫一扫 