hooyantsing's Blog

P149_23_栅格内元素的整体控制技巧

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

P149 23 栅格内元素的整体控制技巧

栅格是固定不变,移动的是栅格内部的元素。

justify-items

控制元素在栅格空间内的水平方向位置。

start

靠左。

936432ea3015c19705241b8d5101fcf5.png

end

靠右。

278f14d41cb8f7c62e1088d05a49c3a2.png

center

居中。

9c66dc98f604c2971ab31cde66a70591.png

stretch

默认,拉抻。栅格空间里面的元素的height/width=auto。

d4beccc4450fa243a6c30f8c84d3a15f.png

align-items

控制元素在栅格空间内的垂直方向位置。

start

靠上。

9c4325dba472eacfedd20dd849d90b24.png

end

靠下。

4270ac5a8fb58e29839c1ff910d4b08e.png

center

居中。

a79cf4c40531169e8643aed06f1f159c.png

stretch

默认,拉抻。栅格空间里面的元素的height/width=auto。

d4beccc4450fa243a6c30f8c84d3a15f.png

CATALOG