CSS flex布局之 align-self 属性

align-self 设置在项目上。属性让单个项目有与其他项目不一样的对齐方式。
默认值为 auto,表示继承父元素的 align-items 属性。其他都与 align-items属性完全一致。

<style>
	div{ display: flex; height: 50px;}
	span{	width: 50px; }
	.sp{align-self:flex-end;}
</style>

<div>
	<span class="sp">1</span>
	<span>2</span>
	<span>3</span>
</div>
  • auto(默认):继承父元素的 align-items 属性。
  • stretch:如果项目未设置高度或设为auto,将占满整个容器的高度。
  • flex-start :交叉轴的起点对齐。
  • flex-end :交叉轴的终点对齐。
  • center :交叉轴的中点对齐。
  • baseline :项目的第一行文字的基线对齐。

JavaScript 语法:

object.style.alignSelf="center"