使用Flexbox可创建灵活的表格布局，通过flex-grow控制列的扩展比例，flex-shrink管理压缩行为，flex-basis设定初始宽度，实现响应式设计中的动态列宽调整，适用于表单、卡片列表等场景。
在CSS中，使用Flexbox可以创建比传统表格更灵活的布局结构。虽然HTML的table元素适合展示数据表格，但在响应式设计中，它缺乏足够的弹性控制。通过Flexbox模拟表格布局，我们可以利用flex-grow和flex-shrink精确控制每列的宽度行为。
用Flexbox替代传统表格
将容器设置为display: flex，其子元素就会变成弹性项目，可以按需伸缩。这种模式特别适合需要动态调整列宽的场景，比如表单布局、卡片列表或自定义数据表格。
基本结构如下：
.table {
display: flex;
width: 100%;
}
.row {
display: flex;
width: 100%;
}
.cell {
padding: 10px;
border: 1px solid #ccc;
}
使用 flex-grow 控制列的扩展比例
flex-grow定义了弹性项目在主轴方向上剩余空间的分配比例。值越大，占据的额外空间越多。
立即学习“前端免费学习笔记（深入）”；
例如，希望“内容”列占满剩余空间，“标题”列保持固定宽度：
- 设置标题列
flex-grow: 1 - 设置内容列
flex-grow: 3—— 它将获得三倍于标题的空间
示例CSS：
.title { flex: 1; }
.content { flex: 3; }
这里flex: 1等价于flex: 1 1 0，但通常我们直接写简写形式。
使用 flex-shrink 控制列的压缩能力
当容器空间不足时，flex-shrink决定项目被压缩的程度。默认值为1，表示可压缩。设为0则禁止缩小。
常见需求：某些列（如操作按钮）不应被压缩，避免文字重叠或图标错位。
示例：
.id { flex: 0 0 60px; } /* 不增长、不收缩、固定60px */
.name { flex: 1 1 auto; } /* 正常伸缩 */
.action { flex: 0 0 80px; } /* 固定宽度，不伸缩 */
其中flex: 0 0 60px明确关闭了flex-grow和flex-shrink，确保该列宽度不变。
结合 flex-basis 设置基准宽度
flex-basis是伸缩的起点，相当于初始宽度。它可以是像素值、百分比或auto。
比如想让两列初始为200px，再根据空间自由扩展：
.column {
flex: 1 1 200px;
}
这样在空间充足时平均分配多余空间，在空间不足时从200px开始等比压缩。
基本上就这些。通过合理配置flex-grow、flex-shrink和flex-basis，你可以打造高度可控的弹性表格布局，适应各种屏幕尺寸和内容变化。关键在于理解每个属性的作用，并用flex简写清晰表达意图。
