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"