使用flex实现三栏布局，两边固定，中间自适应

使用CSS的Flexbox布局可以很容易地实现三栏布局，其中两边固定宽度，中间栏自适应宽度。以下是一个简单的示例：

HTML:

<div class="container">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: space-between;
}

.left, .right {
  width: 200px; /* 你可以根据需要设置固定的宽度 */
  background-color: #f0f0f0; /* 为了可视化效果添加的背景色 */
}

.center {
  flex: 1; /* 使中间栏自适应宽度 */
  background-color: #e0e0e0; /* 为了可视化效果添加的背景色 */
}

在这个示例中，.container元素被设置为display: flex;，使其成为一个flex容器。.left和.right元素被设置了固定的宽度，而.center元素使用了flex: 1;属性，这意味着它会占据剩余的空间，从而实现自适应宽度。justify-content: space-between;则确保了三栏之间有适当的间距。

请注意，如果你希望三栏之间紧密相连，没有间距，你可以移除justify-content: space-between;这一行。另外，背景色只是为了在示例中更好地展示布局效果，你可以根据需要自行调整或移除。