css布局：两边固定中间自适应

<div class="list">
  <div class="list-item item1"></div>
  <div class="list-item item2"></div>
  <div class="list-item item3"></div>
</div>

1.grid布局：

.list {
 display: grid;
 grid-template-columns: 100px auto 100px;
}

.list-item {
  height: 100px;
  background-color: pink;
  border: 1px solid red;
}

2.flex布局： 

.list {
 display: flex;
}

.list-item {
  height: 100px;
  background-color: pink;
  border: 1px solid red;
}

.item1 {
  width: 100px;
}

.item2 {
  flex: 1;
}

.item3 {
  width: 100px;
}

3.width:calc(...);

.list {
 display: flex;
}

.list-item {
  height: 100px;
  background-color: pink;
  border: 1px solid red;
}

.item1 {
  width: 100px;
}

.item2 {
  width: calc(100% - 200px);
}

.item3 {
  width: 100px;
}

......