今天在检查项目的商品列表时,发现用flex弹性布局的垂直列表并不是我想要的效果。
商品列表被flex弹性布局影响导致高度异常。在网上查资料时发现flex弹性布局并不能做到垂直不规则的排列,了解到想要不规则的排列效果,应该使用css 的column的属性
column
实现瀑布流主要依赖两个属性。
column-count
属性,是控制屏幕分为多少列。
column-gap
属性,是控制列与列之间的距离。
CSS columns 属性 (w3school.com.cn)
在父元素中设置column的属性就能使元素不规则的排列,效果如下
总结
遇到需要不规则的排列方式的元素还是用column属性来布局,display