使用 Flexbox 或 CSS Grid 可实现固定与自适应列宽布局。1. Flexbox：父容器设 display: flex，固定列设 width，自适应列设 flex: 1；2. Grid：父容器设 display: grid，用 grid-template-columns 定义如 150px 1fr 1fr，实现固定与比例分配。适用于侧边栏+内容区选 Flexbox，复杂多列选 Grid。
要实现固定列宽与自适应列宽的组合布局，最常用的方式是使用 Flexbox 或 CSS Grid。这两种方法都能轻松控制某些列固定宽度，其他列自动填充剩余空间。
使用 Flexbox 实现
Flexbox 非常适合这种场景。通过设置某些元素为固定宽度，另一些元素设置 flex: 1，即可让其自动伸缩。
示例：左侧固定 200px，右侧自适应
固定列自适应列
.example-flex { display: flex; border: 1px solid #ccc; margin: 10px 0;}.example-flex .fixed { width: 200px; background-color: #e0f7fa; padding: 10px; border-right: 1px solid #b2ebf2;}.example-flex .fluid { flex: 1; background-color: #f9fbe7; padding: 10px;}固定列（200px）自适应列（填满剩余空间）
CSS 关键点：
立即学习“前端免费学习笔记（深入）”；
父容器设置 display: flex固定列设置具体宽度，如 width: 200px自适应列设置 flex: 1，表示占据剩余所有可用空间
使用 CSS Grid 实现
Grid 布局更直观，尤其适合多列复杂结构。
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情
示例：第一列固定 150px，其余两列平均分配剩余空间
固定自适应1自适应2
.grid-container { display: grid; grid-template-columns: 150px 1fr 1fr; /* 第一列固定，后两列均分剩余 */ gap: 10px; border: 1px solid #ddd; padding: 10px; margin-top: 10px;}.grid-container > div { padding: 10px; background-color: #f3e5f5;}固定列（150px）自适应1自适应2
CSS 关键点：
立即学习“前端免费学习笔记（深入）”；
父容器设置 display: grid使用 grid-template-columns 定义列宽用 px 设置固定列，用 fr 单位让其他列按比例分配剩余空间
实际应用场景建议
根据需求选择合适的方法：
简单左右结构（如侧边栏+内容区）推荐使用 Flexbox多列或需要精确控制网格的布局，使用 Grid响应式设计中，可结合媒体查询动态调整固定列是否显示或变宽
基本上就这些，两种方式都很实用，选哪个取决于整体布局复杂度。
以上就是如何用css实现固定列宽与自适应列宽组合的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/999065.html
微信扫一扫 
支付宝扫一扫 
