css多列自适应布局

Question

如图，要实现视频列表区域根据页面宽度自适应。比如现在是三列显示，当页面宽度缩小时，自动变成两列，当页面宽度变大时，也相应地变成多列显示。每个视频的宽高固定，间距固定，列表区域保持居中，列表上面左右两边的文字跟着两端对齐。不使用js计算，只用css + rem如何实现？

列表区域html结构：

使用flex居中的话，最后一行如果没有刚好铺满，则多出的视频也居中了，但我要最后一行左对齐，也就是说视频是从上到、下从左到右排下来的。因为列数是不确定的，所以也没法对最后一行的视频单独设置flex属性。
使用媒体查询好像能做到，但又不知道怎么实现。

Answer 1

使用媒体查询吧

Answer 2

我感觉。不需要用到JS吧。
视频展示区域设置最小min-width为一个视频方格的宽度，然后width用百分比设置。
视频方格float:left，最后用一个div clear: both撑大父元素。
然后浏览器缩小的时候，视频展示区宽度缩小，不够一排三个的宽度，float的特性使得视频方格下排，然后由于最后一个clear父元素被拉长，形成一排两个，共有三排的布局。

Answer 3

如一楼所说,媒体查询再适合不过,或者你想懒一点就用bootstrap的栅栏布局

Answer 4

用媒体查询和calc就可以。
看这个代码合适不
https://jsfiddle.net/codekoal...