align-items 属性决定元素在 Y 轴上的对齐方式

1
2
3
4
<style type="text/css">
	.main.justify-content .child{
		/* 子元素不能设置 flex 属性 为 1 或则 auto */
		flex: inherit;
		-ms-flex: inherit;
		-webkit-flex: inherit;
	}
	.main.align-items{
		height : 200px; /* 设置一个默认高度 */
	}
	.align-items.flex-start{
		align-items : flex-start;   /* Y 轴的顶点对齐 */
	}
	.align-items.flex-end{
		align-items : flex-end;     /* Y 轴的底部对齐 */
	}
	.align-items.center{
		align-items : center;       /* Y 轴的居中点对齐 */
	}
	.align-items.baseline{
		align-items : baseline;     /* 元素的第一行文字的基线对齐 */
	}
	.align-items.stretch{
		align-items : stretch;      /* 默认值:如果元素未设置高度或设为auto,将铺满整个容器的高度 */
	}
</style>

<div class="main align-items">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
</div>

查看基础样式