CSS Flex 交叉轴

交叉轴

交叉轴是垂直方向还是水平方向，需要根据主轴方向（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

---

测试代码

    
        
        
        
    
    
        

            
第一
            
第二
            
第三
            
第四