css justify-content属性怎么用
导读：cssjustify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，对齐方式有：位于容器的开头、位于容器的结尾、位于容器的中心、均匀分布等等。 cssjustify-content属性怎么用？ justif...
cssjustify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，对齐方式有：位于容器的开头、位于容器的结尾、位于容器的中心、均匀分布等等。
cssjustify-content属性怎么用？
justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。可以使用align-content属性对齐交叉轴上的各项（垂直）。
语法：
justify-content:flex-start|flex-end|center|space-between|space-around|initial|inherit;
属性值：
● flex-start：默认值。项目位于容器的开头。
flex-start.jpg
● flex-end：项目位于容器的结尾。
flex-end.jpg
● center：项目位于容器的中心。
center.jpg
● space-between：项目位于各行之间留有空白的容器内，即均匀分布在线上;
第一项是在起始行，最后一项是在结束行。
space-between.jpg
● space-around：项目位于各行之前、之间、之后都留有空白的容器内。
space-around.jpg
● initial：设置该属性为它的默认值。
● inherit：从父元素继承该属性。
cssjustify-content属性示例
.flex-container{
padding:0;
margin:0;
list-style:none;
display:flex;
}
.flex-start{
justify-content:flex-start;
}
.flex-end{
justify-content:flex-end;
}
.flex-endli{
background:gold;
}
.center{
justify-content:center;
}
.centerli{
background:deepskyblue;
}
.space-between{
justify-content:space-between;
}
.space-betweenli{
background:lightgreen;
}
.space-around{
justify-content:space-around;
}
.space-aroundli{
background:hotpink;
}
.space-evenly{
justify-content:space-evenly;
}
.space-evenlyli{
background:#bada55;
}
.flex-item{
background:tomato;
padding:5px;
width:60px;
height:50px;
margin:5px;
line-height:50px;
color:white;
font-weight:bold;
font-size:2em;
text-align:center;
}
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css justify-content属性怎么用
本文地址： https://pptw.com/jishu/664719.html