hooyantsing's Blog

P108_8_控制弹性元素溢出换行处理

字数统计: 144阅读时长: 1 min
2020/04/15

P108 8 控制弹性元素溢出换行处理

flex-wrap

本属性放置在弹性盒子,控制弹性元素溢出换行。

提要:

x轴方向 -> flex-direction:row

y轴方向 -> flex-direction:column

默认,如果盒子特别小,元素始终会在一行,并压缩自身所占空间。形象点说,几个子元素挤在一起,都挤瘦了。

x轴方向

71d9442b0194749d23efc01f8b083721.png

y轴方向

6021744e86abb1ecf5bca3dc9a083cff.png

wrap

开启换行,如果空间不够,就换到下一行。

x轴方向

d837c1fd33dcab626b0adf2cd34e8685.png

y轴方向

2cd8c1b62b15918bc0709d4133f953f8.png

wrap-reverse

反向折行。

x轴方向

cde491b3fde71290fb2a23e51ddb2ddd.png

y轴方向

50eeca1418bc1d49d1ab3234cfaffe58.png

CATALOG