hooyantsing's Blog

P113_13_多行元素在交叉轴的排列方式

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

P113 13 多行元素在交叉轴的排列方式

align-content

[对弹性容器设置]

同一行放不下子元素折行变为多行。

控制多行子元素的排列方式。

flex-start

靠向起始点。

例:

1
2
3
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;

239f2d6fa2a1a91f94ac37a6a0769b98.png

flex-end

靠向起始点。

1
2
3
flex-direction: row;
flex-wrap: wrap;
align-content: flex-end;

3247e3b845771ea8c4eb280453fd5792.png

center

子元素居中。

c625253b6a037d4d1b628bb0525eba61.png

space-between

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

65e25217a061e7077e1870259b995d71.png

space-around

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

edfe029003d8c4550b05f6f6930861d4.png

space-evenly

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

1e13f8a4ba0f55faaaf020a0b6ee02c9.png

CATALOG