align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch

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

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

查看基础样式