弹性布局，一行两列，一列固定宽，如何实现？

实现一个弹性布局，其中一行包含两列，一列为固定宽度而另一列自适应剩余空间，可以使用CSS的Flexbox布局模型来轻松完成。以下是一个简单的示例：

HTML

<div class="container">
  <div class="fixed-column">固定宽度</div>
  <div class="flexible-column">自适应宽度</div>
</div>

CSS

.container {
  display: flex; /* 启用Flexbox布局 */
}

.fixed-column {
  width: 200px; /* 固定宽度 */
  background-color: #d3d3d3; /* 仅为了视觉区分 */
}

.flexible-column {
  flex-grow: 1; /* 让这列占据剩余所有可用空间 */
  background-color: #f0f0f0; /* 仅为了视觉区分 */
}

解释

• .container 使用 display: flex; 来启用弹性盒子布局，这使得其直接子元素成为弹性项目。
• .fixed-column 设置了一个固定的宽度（例如200px），这意味着无论容器的大小如何变化，这一列都将保持200px宽。
• .flexible-column 使用了 flex-grow: 1; 属性，这意味着它将自动扩展以填充容器中未被其他弹性项目使用的任何剩余空间。

这种方法非常直观且易于维护，适用于大多数需要在一行中布局两个或更多列的情况，其中一个或多个列具有固定的尺寸，而其余列则根据可用空间进行调整。此外，Flexbox还提供了更多的灵活性，比如对齐方式、换行等高级功能，可以根据具体需求进一步定制。