css flex align-self属性

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>


例子