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