css首尾固定中间自适应

可以使用flex布局来实现CSS首尾固定中间自适应的效果。具体实现步骤如下：

1. 父元素设置display:flex;，使其成为一个flex容器。
2. 子元素设置flex-shrink: 0;，使其在父容器空间不足时不缩小。
3. 将首尾元素的宽度固定，如设置width:100px;。
4. 将中间元素设置flex:1;，使其占据剩余空间自适应。

示例代码如下：

HTML代码：

<div class="container">
  <div class="item fixed">首部</div>
  <div class="item flex">中间</div>
  <div class="item fixed">尾部</div>
</div>

CSS代码：

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

.item {
  height: 50px;
  display: flex;
  align-items: center;
}

.fixed {
  width: 100px;
}

.flex {
  flex: 1;
}

通过以上代码，即可实现CSS首尾固定中间自适应的效果。