hooyantsing's Blog

P112_12_交叉轴元素的多种排列方式

字数统计: 128阅读时长: 1 min
2020/04/16

P112 12 交叉轴元素的多种排列方式

align-items

[对弹性容器设置]

控制交叉轴/副轴上子元素的排列方式。

flex-start

交叉轴,子元素靠向交叉轴起始点。

例:

1
2
flex-dirction: row;
align-items: flex-start;

64e2c0e60c6e9e3a8272a26eccb614d1.png

flex-end

交叉轴,子元素靠向交叉轴结束点。

例:

1
2
flex-dirction: row;
align-items: flex-end;

dd5701ffa1fefa7eb6718cb3dc08b712.png

center

子元素居中。

9226902d7adbff9a68e3109d84a15d9a.png

stretch

拉抻,沿交叉轴方向拉满空间。

注意:子元素不能设定高度/宽度。

例:

1
2
flex-dirction: row;
align-items: stretch;

2c048d85e2de8f2aedac693e1182ad38.png

CATALOG