CSS Flexbox三栏布局问题：首栏固定宽度，其余栏自适应占满

嘿，我来帮你解决这个布局问题！你想要的是第一栏固定宽度，另外两栏自适应拉伸占满剩余空间的三栏结构，问题确实出在.col的通用样式上——你给所有列都设了flex-basis:25%，这会让它们都按固定比例分配宽度，没法实现固定+自适应的组合。

下面是调整后的解决方案：

核心思路 #

• 给第一栏单独设置固定宽度，不参与弹性空间分配
• 让另外两栏通过flex:1属性自动平分剩余可用空间

完整代码示例 #

CSS部分 #

.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%; /* 显式声明容器占满宽度，默认block元素也会是100%，但写出来更清晰 */
}

.col-fixed {
  width: 200px; /* 这里设置你需要的固定宽度，比如200px */
  /* 也可以用flex-basis:200px; 效果一致，因为flex-direction是row方向 */
}

.col-flex {
  flex: 1; /* 关键属性：是flex-grow:1, flex-shrink:1, flex-basis:0% 的简写 */
}

HTML部分 #

<div class="wrapper">
  <div class="col-fixed">1（固定宽度）</div>
  <div class="col-flex">2（自适应拉伸）</div>
  <div class="col-flex">3（自适应拉伸）</div>
</div>

关键属性解释 #

• flex:1：这个属性让第二、三栏会自动拉伸以填满容器剩余的所有空间，当页面宽度变化时，它们会始终保持平分剩余宽度的比例。
• 第一栏的固定宽度设置后，Flexbox会先为它分配好空间，剩下的宽度再由两个col-flex平均分配。

额外小技巧 #

如果想给栏与栏之间加间距，推荐用Flexbox原生的gap属性：给.wrapper加上gap: 15px就能轻松实现均匀间距，比手动加margin更简洁可靠。

内容的提问来源于stack exchange，提问作者user9278880