CSS flex 布局(入门)- justify-content 主轴对齐

justify-content 属性设置在容器上,定义项目在主轴方向的对齐方式。

div{
	display: flex;
	flex-direction: row;/* 水平排列,起点左边 */
	flex-wrap: wrap; /* 换行,起点左边 */
	justify-content:center; /* 主轴居中对齐 */
}
  • flex-start :左对齐(默认)。
  • flex-end :右对齐。
  • center :居中。
  • space-between :两端对齐,项目之间的间隔都相等,最边缘没有间隔。
  • space-around :每个项目两侧的间隔相等,最边缘间隔是项目间间隔的一半。
  • space-evenly :项目之间间隔相等,最边缘间隔等于项目之间的间隔。
justify-content:center 5-1

具体对齐方式与项目的排列方向有关,具体查看实例

兼容性 :

属性 IE Chrome Firefox Safari Opera
justify-content 11.0 21.0 -webkit-
29.0
18.0 -moz-
28.0
6.1 -webkit-
9.0
17.0

JavaScript 语法:

object.style.justifyContent="space-between";