一、實現“左右定寬，中間自適應”三欄效果的5種方式

基本 DOM 結構：

<article class="container">
  <div class="left">this is left</div>
  <div class="center">this is center this is center this is 
center</div>
  <div class="right">this is right</div>
</article>

1、使用浮動

div {
  min-height: 400px;
}
.left {
  width: 200px;
  background: pink;
  float: left;
}
.center {
  background: lightgreen;
}
.right {
  width: 200px;
  background: lightblue;
  float: right;
}

左欄和右欄分別設定 float 為 left 和 right

注意：使用此方式 HTML 中三欄的順序為：左-右-中

<article class="container">
  <div class="left">this is left</div>
  <div class="right">this is right</div>
  <div class="center">this is center this is center this is 
center</div>
</article>

2、使用絕對定位

div {
  min-height: 400px;
}
.left {
  width: 200px;
  background: pink;
  position: absolute;
  left: 0;
}
.center {
  background: lightgreen;
  position: absolute;
  left: 200px;
  right: 200px;
}
.right {
  width: 200px;
  background: lightblue;
  position: absolute;
  right: 0;
}

對三欄設 position 為 absolute，左欄和右欄分別設 left 和 right 的值為 0，中間欄設定 left 和 right 的值為左欄和右欄的寬度

此方式 HTML 中三欄的順序不影響最終效果

3、使用彈性佈局

div {
  min-height: 400px;
}
article {
  display: flex;
}
.left {
  width: 200px;
  background: pink;
}
.center {
  background: lightgreen;
  flex: 1;
}
.right {
  width: 200px;
  background: lightblue;
}

為三欄的父元素設定 display 為 flex，並在中間欄設定 flex 的值為 1

注意：使用此方式 HTML 中三欄的順序為：左-中-右

<article class="container">
  <div class="left">this is left</div>
  <div class="center">this is center this is center this is 
center</div>
  <div class="right">this is right</div>
</article>

4、使用表格佈局

article {
  width: 100%;
  height: 400px;
  display: table;
}
.left {
  width: 200px;
  background: pink;
  display: table-cell;
}
.center {
  background: lightgreen;
  display: table-cell;
}
.right {
  width: 200px;
  background: lightblue;
  display: table-cell;
}

對三欄的父元素設定 display 為 table，同時設定寬和高，並對三欄設 display 為 table-cell

注意：使用此方式 HTML 中三欄的順序為：左-中-右

<article class="container">
  <div class="left">this is left</div>
  <div class="center">this is center this is center this is 
center</div>
  <div class="right">this is right</div>
</article>

5、使用網格佈局

article {
  width: 100%;
  display: grid;
  grid-template-rows: 400px;
  grid-template-columns: 200px auto 200px;
}
.left {
  background: pink;
}
.center {
  background: lightgreen;
}
.right {
  background: lightblue;
}

對三欄的父元素設定 display 為 grid，同時設定寬度、grid-template-rows 和 grid-template-columns

注意：使用此方式 HTML 中三欄的順序為：左-中-右

二、如果增加任一欄的高度，哪個能正常拉伸？效果如下：

上述五種方式中，只有 flex 和 table 兩種方式能在增加高度時正常撐開

&n