flex align-self属性允许子元素有与其他元素不一样的对齐方式,比如父元素设置align-items: flex-start;flex-direction:row 那么所有子元素全部从上往下对齐,而设置了align-self属性的子元素可以不遵循这个规则,可覆盖父元素的align-items属性。默认值为auto,表示继承父元素的对齐规则。
align-self属性
#boxs
{
width:60%;
height:100px;
border:1px solid #333;
display:flex;
align-items: flex-start;
}
#boxs div
{
width:20%;
}
<div id="boxs">
<div style="background-color:#ffc5c5;" >元素A</div>
<div style="background-color:#7171f7;align-self:center;" >元素B</div>
<div style="background-color:#c6d8c6;" >元素C</div>
</div>
例子