css多列自适应布局
如图，要实现视频列表区域根据页面宽度自适应。比如现在是三列显示，当页面宽度缩小时，自动变成两列，当页面宽度变大时，也相应地变成多列显示。每个视频的宽高固定，间距固定，列表区域保持居中，列表上面左右两边的文字跟着两端对齐。不使用js计算，只用css + rem如何实现？
列表区域html结构：
使用flex居中的话，最后一行如果没有刚好铺满，则多出的视频也居中了，但我要最后一行左对齐，也就是说视频是从上到、下从左到右排下来的。因为列数是不确定的，所以也没法对最后一行的视频单独设置flex属性。
使用媒体查询好像能做到，但又不知道怎么实现。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
使用媒体查询吧
我感觉。不需要用到JS吧。
视频展示区域设置最小min-width为一个视频方格的宽度，然后width用百分比设置。
视频方格float:left，最后用一个div clear: both撑大父元素。
然后浏览器缩小的时候，视频展示区宽度缩小，不够一排三个的宽度，float的特性使得视频方格下排，然后由于最后一个clear父元素被拉长，形成一排两个，共有三排的布局。
如一楼所说,媒体查询再适合不过,或者你想懒一点就用bootstrap的栅栏布局
用媒体查询和calc就可以。
看这个代码合适不
https://jsfiddle.net/codekoal...