有个需求是要根据页面宽度实现每行展示的元素不固定, 同时能够在一定宽度范围内做到自适应.
一开始想到的是用flex布局, 通过设置子元素的flex:1, 来实现. 但这种方法有个问题, 最后一行的元素如果不能填满整行, 就会被拉伸, 导致和之前的元素不一致.
最好的办法是用设置响应式的网格布局, 这里用了组件库(arco)提供的栅格布局来实现, 自己写原生也能达到想要的效果, 原理就是根据页面宽度来设置每行展示的个数, 相当于固定了个数, 然后栅格化. 同时这种方法因为可以设置沟槽的宽度, 所以不需要像flex布局那样去处理元素之间的边距
附上arco的响应式栅格, 代码可以去官网看
标签：布局,flex,每行,元素,个数,栅格,宽度,数组 来源： https://www.cnblogs.com/wazosky/p/16333266.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。