css flex 教程

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>


例子

Catalog
css flex 教程 父元素属性 flex-direction 属性 flex-wrap 属性 flex-flow 属性 justify-content 属性 align-items 属性 align-content 属性 子元素属性 order 属性 flex-grow 属性 flex-shrink 属性 flex-basis 属性 flex 属性 align-self 属性 常见用例 左边固定右边自适应 右边固定左边自适应 两边固定中间自适应 上下固定中间自适应 css flex 1 省略号