左右两列定宽，中间列自适应的两种实现方法

1. flex布局: flex: 1;

// html
<div class='second'>
    <div></div>
    <div></div>
    <div></div>
</div>

// css
.second {
  display: flex;
  height: 100px;
}

.second div:first-child, .second div:last-child {
  width: 50px;
  background: red;
}

.second div:nth-child(2) {
  flex: 1;
  background: pink;
}
复制代码

2. 利用calc()函数

// html
<div class='third'>
    <div class='first-div'></div>
    <div class='second-div'></div>
    <div class='third-div'></div>
</div>

// css
.third {
  font-size: 0;  // 这里去除使用inline-block出现的空白间隙
} 

.first-div, .second-div, .third-div {
  display: inline-block;
  height: 100px;
}

.first-div, .third-div {
  background: pink;
  width: 50px;
}

.second-div {
  background: red;
  width: calc(100% - 100px);
}
复制代码

转载于:https://juejin.im/post/5c7f757ce51d45104c40cb1c