html交叉轴排列,CSS Flex 交叉轴水平方向

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

1. align-items: flex-start

主轴为垂直排列那么交叉轴就是水平方向

flex-direction: column;

align-items: flex-start;

Jietu20191229-204126.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: column;

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

测试代码

* {

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;

}

第一

第二

第三

第四