justify-content 属性元素在 X 轴的对齐方式

1
2
3
4
<style type="text/css">
	.main.justify-content .child{
		/* 子元素不能设置 flex 属性 为 1 或则 auto */
		flex: inherit;
		-ms-flex: inherit;
		-webkit-flex: inherit;
	}
	.justify-content.flex-start {
		justify-content: flex-start;     /* 默认值 左对齐 */
	}
	.justify-content.flex-end {
		justify-content: flex-end;       /* 右对齐 */
	}
	.justify-content.center {
		justify-content: center;         /* 居中 */
	}
	.justify-content.space-between {
		justify-content: space-between;  /* 两端对齐,项目之间的间隔都相等 */
	}
	.justify-content.space-around {
		justify-content: space-around;   /* 每个项目两侧的间隔相等 */
	}
</style>

<div class="main justify-content">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
</div>

查看基础样式