[聚合文章] CSS3 弹性盒子(Flex Box)

align-self(用于设置弹性元素自身在垂直方向上的对齐方式)

• auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

.father{                            background:gray;                display: flex;                  width:300px;                    height:200px;               }                               .son1 {                             flex:1;                         height: 100px;                  align-self: flex-start;         background:red;             }                               .son2{                              flex:1;                         height: 100px;                  align-self: flex-end;           background:blue;            }                                .son3{                             flex:1;                         height: 100px;                  align-self: center;             background:deeppink;        }                                .son4{                             flex:1;                         height: 100px;                  align-self: baseline;           background:greenyellow;     }                               

<div class="father">             <div class="son1"></div>     <div class="son2"></div>     <div class="son3"></div>     <div class="son4"></div> </div>
                
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。