hooyantsing's Blog

P111_11_主轴元素的多种排列方式

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

P111 11 主轴元素的多种排列方式

justify-content

[对弹性容器设置]

控制主轴上子元素的排列方式。

flex-start

主轴,子元素靠向主轴起始点。

例:

1
2
flex-dirction: row;
justify-content: flex-start;

8d96aea52c53a8be316c4d8b2d2d8340.png

flex-end

主轴,子元素靠向主轴结束点。

例:

1
2
flex-dirction: row;
justify-content: flex-end;

c74599a79cd032d7503f5582551e5876.png

1
2
flex-dirction: row-reverse;
justify-content: flex-end;

39806e830cbc693989d5808ba3ca1e8b.png

center

子元素居中。

966194cdd760cdb092adeb071a746783.png

space-between

子元素平均分布。第一个和最后一个元素分靠到两边,中间的元素平均分布。

693327d0fbc89d6fd8432cd49a940f01.png

space-around

子元素平均分布。每个子元素左右都有相同间距,但子元素与子元素之间叠加成了双倍间距。

3e02a9d90639a2ea11204f35642d11df.png

space-evenly

子元素平均分布。最合适的方式,子元素和子元素之间间距相等。

4dd78367cd20c3d0134a1a19f01035e1.png

CATALOG