CSS flex布局之 justify-content 属性

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

div{
	display: flex;
	justify-content: center;
}

justifycontent.jpg

图一

具体对齐方式与项目的排列方向有关。假设主轴为从左到右,它可能的值有:

  • flex-start (默认):左对齐。
  • flex-end :右对齐。
  • center :居中。
  • space-between :两端对齐,项目之间的间隔都相等。
  • space-around :每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍。

JavaScript 语法:

object.style.justifyContent="space-between"