如何用Flex实现右侧双固定宽度项布局？左侧列宽度自适应

使用CSS Flex布局可以轻松实现这个需求，具体实现代码如下：

保持原HTML结构不变 #

<div id="flex-container">
  <div id="a">
    some text, the length is undetermined
  </div>
  <div id="b">
    <!-- 固定宽度100px -->
  </div>
  <div id="c">
    <!-- 固定宽度30px -->
  </div>
</div>

核心CSS样式 #

#flex-container {
  display: flex; /* 启用Flex布局 */
  width: 100%; /* 让父容器占满可用宽度 */
  /* 可选：需要垂直居中时添加 */
  /* align-items: center; */
}

#a {
  flex: 1; /* 占据父容器剩余所有空间，实现宽度自适应 */
  /* 可选：内容过长时自动换行 */
  /* word-wrap: break-word; */
}

#b {
  width: 100px; /* 设置固定宽度 */
  flex-shrink: 0; /* 防止空间不足时被压缩 */
}

#c {
  width: 30px; /* 设置固定宽度 */
  flex-shrink: 0; /* 防止空间不足时被压缩 */
}

实现原理 #

• display: flex 将父容器转为Flex容器，子元素自动成为Flex布局项；
• flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，表示#a会尽可能占据父容器的剩余空间；
• flex-shrink: 0 强制#b和#c保持固定宽度，避免在父容器空间不足时被压缩。

如果需要兼容老旧浏览器，也可以用浮动方案替代，但Flex布局更简洁易维护：

#flex-container {
  width: 100%;
  overflow: hidden; /* 清除浮动影响 */
}

#a {
  margin-right: 130px; /* 预留#b和#c的总宽度 */
}

#b {
  float: right;
  width: 100px;
}

#c {
  float: right;
  width: 30px;
}

推荐优先使用Flex布局，这是当前前端布局的标准方案。

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