电话
13363039260
css justify-content属性怎么用
2024-01-17 16:08 小编
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属性示例
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<style>
.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;
}
</style>
</head>
<body>
<ulclass="flex-containerflex-start">
<liclass="flex-item">1</li>
<liclass="flex-item">2</li>
<liclass="flex-item">3</li>
<liclass="flex-item">4</li>
<liclass="flex-item">5</li>
</ul>
<ulclass="flex-containerflex-end">
<liclass="flex-item">1</li>
<liclass="flex-item">2</li>
<liclass="flex-item">3</li>
<liclass="flex-item">4</li>
<liclass="flex-item">5</li>
</ul>
<ulclass="flex-containercenter">
<liclass="flex-item">1</li>
<liclass="flex-item">2</li>
<liclass="flex-item">3</li>
<liclass="flex-item">4</li>
<liclass="flex-item">5</li>
</ul>
<ulclass="flex-containerspace-between">
<liclass="flex-item">1</li>
<liclass="flex-item">2</li>
<liclass="flex-item">3</li>
<liclass="flex-item">4</li>
<liclass="flex-item">5</li>
</ul>
<ulclass="flex-containerspace-around">
<liclass="flex-item">1</li>
<liclass="flex-item">2</li>
<liclass="flex-item">3</li>
<liclass="flex-item">4</li>
<liclass="flex-item">5</li>
</ul>
<ulclass="flex-containerspace-evenly">
<liclass="flex-item">1</li>
<liclass="flex-item">2</li>
<liclass="flex-item">3</li>
<liclass="flex-item">4</li>
<liclass="flex-item">5</li>
</ul>
</body>
</html>
猜你喜欢
联络方式：
13363039260
微信二维码 