css中justify-content属性的使用方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
css justify-content用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,对齐方式有:位于容器的开的头,位于容器的结尾,位于容器的中心,均匀分布等等。
justify-content用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。可以使用align-content属性对齐交叉轴上的各项(垂直)。
<强>语法:
justify-content: flex-start | flex-end | |中心之间的空间|空间初始| |继承; <强>属性值:
●flex-start:默认值。项目位于容器的开头。
●flex-end:项目位于容器的结尾。
●中心:项目位于容器的中心。
●之间的空间:项目位于各行之间留有空白的容器内,即均匀分布在线上;第一项是在起始行,最后一项是在结束行。
●空间:项目位于各行之前,之间,之后都留有空白的容器内。
●初始:设置该属性为它的默认值。
●继承:从父元素继承该属性。
<强> css justify-content属性示例
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; style>
.flex-container {
填充:0;
保证金:0;
list-style:没有;
显示:flex;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
李.flex-end {
背景:黄金;
}
.center {
justify-content:中心;
}
李.center {
背景:deepskyblue;
}
.space-between {
justify-content:之间的空间;
}
李.space-between {
背景:lightgreen;
}
.space-around {
justify-content:空间;
}
李.space-around {
背景:hotpink;
}
.space-evenly {
justify-content: space-evenly;
}
李.space-evenly {
背景:# bada55;
}
.flex-item {
背景:番茄;
填充:5 px;
宽度:60 px;
高度:50 px;
保证金:5 px;
行高:50 px;
颜色:白色;
粗细:大胆的;
字体大小:2 em;
text-align:中心;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; ul类=癴lex-container flex-start"比;
& lt;李类=癴lex-item"祝辞1 & lt;/li>
& lt;李类=癴lex-item"祝辞2 & lt;/li>
& lt;李类=癴lex-item"祝辞3 & lt;/li>
& lt;李类=癴lex-item"祝辞4 & lt;/li>
& lt;李类=癴lex-item"祝辞5 & lt;/li>
& lt;/ul>
& lt; ul类=癴lex-container flex-end"比;
& lt;李类=癴lex-item"祝辞1 & lt;/li>
& lt;李类=癴lex-item"祝辞2 & lt;/li>
& lt;李类=癴lex-item"祝辞3 & lt;/li>
& lt;李类=癴lex-item"祝辞4 & lt;/li>
& lt;李类=癴lex-item"祝辞5 & lt;/li>
& lt;/ul>
& lt; ul类=癴lex-container center"比;
& lt;李类=癴lex-item"祝辞1 & lt;/li>
& lt;李类=癴lex-item"祝辞2 & lt;/li>
& lt;李类=癴lex-item"祝辞3 & lt;/li>
& lt;李类=癴lex-item"祝辞4 & lt;/li>
& lt;李类=癴lex-item"祝辞5 & lt;/li>
& lt;/ul>
& lt; ul类=癴lex-container space-between"比;
& lt;李类=癴lex-item"祝辞1 & lt;/li>
& lt;李类=癴lex-item"祝辞2 & lt;/li>
& lt;李类=癴lex-item"祝辞3 & lt;/li>
& lt;李类=癴lex-item"祝辞4 & lt;/li>
& lt;李类=癴lex-item"祝辞5 & lt;/li>
& lt;/ul>
& lt; ul类=癴lex-container space-around"比;
& lt;李类=癴lex-item"祝辞1 & lt;/li>
& lt;李类=癴lex-item"祝辞2 & lt;/li>
& lt;李类=癴lex-item"祝辞3 & lt;/li>
& lt;李类=癴lex-item"祝辞4 & lt;/li>
& lt;李类=癴lex-item"祝辞5 & lt;/li>
& lt;/ul>
& lt; ul类=癴lex-container space-evenly"比;
& lt;李类=癴lex-item"祝辞1 & lt;/li>
& lt;李类=癴lex-item"祝辞2 & lt;/li>
& lt;李类=癴lex-item"祝辞3 & lt;/li>
& lt;李类=癴lex-item"祝辞4 & lt;/li>
& lt;李类=癴lex-item"祝辞5 & lt;/li>
& lt;/ul>
& lt;/body>
& lt;/html>
