如何使用CSS和HTML实现三列表格布局，并让其中一列占据整个宽度？

记得有一次，我在朋友家，看到他的电视柜里放着三排CD。
中间一排CD比两侧宽。
我突然想到，这其实就像一个简单的三栏布局，中间的CD自然占用了更多的空间。
如果用Flexbox来做这样的布局不是更简单吗？例如，我可以把电视柜想象成一个容器。
中间的CD代表可扩展列，两侧的列是固定宽度列。
这样，通过调整CSS的flex属性就可以轻松实现这种效果。
例如，我可以为中间CD设置flex:2 ，为两侧设置flex:1 ，这样中间CD会自动占用更多空间。
另外，如果我想让中间的CD显示全宽，我只需要再添加一个类，比如全宽，然后给CSS设置flex:1 00，中间的CD就会立即占据电视柜的整个宽度。
这就是 Flexbox 的力量。
只需几行代码，就可以实现复杂的渲染效果。
等等，还有一件事，我突然想到，如果这个布局要适应不同的屏幕尺寸，我是否也可以使用媒体查询来调整flex值？通过这种方式，可以实现真正响应式的城市规划。

HTML列表嵌套怎么做_HTML多级嵌套列表创建与缩进控制方法

使用Flexbox实现多层嵌套布局：父级纵向排列，子级横向排列，子子级自动换行