交叉轴

交叉轴是垂直方向还是水平方向，需要根据主轴方向（flex-direction: row），如果主轴是水平方向那么交叉轴为垂直方向，如果主轴方向垂直方向（flex-direction: column），交叉轴就是水平方向。

1. align-items: flex-start

每个容器内部每个块级元素的排列起始点交叉轴：即与主轴垂直位置!

flex-direction: row;
align-items: flex-start;

主轴横向.jpg

2. align-items：flex-end

主轴横向排列交叉轴为纵向排列，那么flex-end 就是交叉轴下方是排列结束位置

article {
    display: flex;
    border: solid 5px silver;
    border-color: #8A2BE2;
    width: 450px;
    height: 280px;
    background: red; 
    flex-direction: row;
    align-items: flex-end;            
}

主轴横向.jpg

3. align-items: center

主轴是水平横向排列，那么交叉轴为垂直方向纵向排列 center 就是交叉轴中心位置对齐

article {
 display: flex;
 border: solid 5px silver;
 border-color: #8A2BE2;
 width: 450px;
 height: 280px;
 background: red;
 flex-direction: row;
 align-items: center;
}

Jietu20191229-194450.jpg

4. align-items: stretch

主轴是水平横向排列，那么交叉轴为垂直方向纵向排列 stretch 会沿着交叉轴垂直方向拉伸填充完垂直方向容器 注意必须是容器内的子元素没有设置垂直方向高度，设置尺寸则该元素属性无法生效

article {
    display: flex;
    border: solid 5px silver;
    border-color: #8A2BE2;
    width: 450px;
    height: 280px;
    background: red; 
    flex-direction: row;
        align-items: stretch;
}
            
article * {
    width: 100px;
    /* height: 100px; */
}

Jietu20191229-195349.jpg

测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" content="width=device-width, initial-scale=1.0">
        <title></title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }
            
            body {
                padding-left: 0px;
                padding-top: 15px;
            }
            
            article {
                display: flex;
                border: solid 5px silver;
                border-color: #8A2BE2;
                width: 450px;
                height: 280px;
                background: red; 
                flex-direction: row;
                align-items: flex-end;
            }
            
            
            article * {
                width: 100px;
                height: 100px;
            }
            
            .first {
                background: #87CEEB;
            }
            
            .second {
                background: #FFA07A;
            }
            
            .third {
                background: lightpink;
            }
            .fourth {
                background: lightgreen;
            }
        
        </style>
    </head>
    <body>
        <article>
            <div class="first">第一</div>
            <div class="second">第二</div>
            <div class="third">第三</div>
            <div class="fourth">第四</div>
        </article>
    </body>
</html>