数组元素布局为自适应+不固定每行个数+响应式

有个需求是要根据页面宽度实现每行展示的元素不固定, 同时能够在一定宽度范围内做到自适应. 

一开始想到的是用flex布局, 通过设置子元素的flex:1, 来实现. 但这种方法有个问题, 最后一行的元素如果不能填满整行, 就会被拉伸, 导致和之前的元素不一致.

最好的办法是用设置响应式的网格布局, 这里用了组件库(arco)提供的栅格布局来实现, 自己写原生也能达到想要的效果, 原理就是根据页面宽度来设置每行展示的个数, 相当于固定了个数, 然后栅格化. 同时这种方法因为可以设置沟槽的宽度, 所以不需要像flex布局那样去处理元素之间的边距

 附上arco的响应式栅格, 代码可以去官网看

标签：布局,flex,每行,元素,个数,栅格,宽度,数组
来源： https://www.cnblogs.com/wazosky/p/16333266.html