三列自適應佈局(聖盃佈局)

介紹

• 簡單來說就是頁面分為左中右3個部分，其中左右兩側固定寬度，而中間部分自適應。

實現

• 假設每列的高度為150px，左列寬度為200px，右列寬度為150px，中間部分自適應。

方式一：左右浮動+中間100%寬度

HTML結構

• 需要一個父元素來包裹3列，這裡為container

<style type="text/css">
  /* 設定左右內邊距*/
  .container {
     padding-left: 200px;  /*左列寬度*/
     padding-right: 150px; /*右列寬度*/
  }
</style>
<div class="container"></div>
複製程式碼

在container中新增三列

• 將三列都設定float:left;使其在同一排顯示
• 由於center寬度為100%將父元素佔滿了，因此left和right只能換行顯示

<style type="text/css">
  .container div {
     height: 150px;
     color: white;
     line-height: 150px;
     float: left;
  }
  .center {
     width: 100%;
     background-color: #50bf3c;
  }
  .left {
     width: 200px;
     background-color: #ff5722;
  }
  .right {
     width: 150px;
     background-color: #2196f3;
  }
</style>
<div class="container">
    <div class="center">中間自定義</div>
    <div class="left">左側定寬</div>
    <div class="right">右側定寬</div>
</div>
複製程式碼

將left上移至center同行顯示

• 設定margin-left:-100%;left上移到center一行，並且與center重疊

.left {
   margin-left: -100%;
}
複製程式碼

• 設定相對位置且將left移動到父元素的左側

.left {
   position: relative;
   right: 200px; /*自身寬度*/
}
複製程式碼

將right上移至center同行顯示

• 設定margin-right:-150px;right上移到center一行，完成聖盃佈局。此時改變視窗大小，中間區域會自適應變化。

.right {
   margin-right: -150px;
}
複製程式碼

關鍵點

• center放在文件流前面以便於優先渲染
• 使用負外邊距
• left使用相對定位

---

方法二：絕對定位+中間不給寬度

完整程式碼

<style type="text/css">
   .container {
      position: relative;
      text-align: center;
   }
   .container div {
      height: 150px;
      color: white;
      line-height: 150px;
   }
   .center {
      background-color: #50bf3c;
      margin-left: 200px;
      margin-right: 150px;
   }
   .left {
      width: 200px;
      background-color: #ff5722;
      position: absolute;
      top: 0px;
      left: 0px;
   }
   .right {
      width: 150px;
      background-color: #2196f3;
      position: absolute;
      top: 0px;
      right: 0px;
   }
</style>
<div class="container">
    <div class="center">中間自適應</div>
    <div class="left">左側定寬</div>
    <div class="right">右側定寬</div>
</div>
複製程式碼

關鍵點

• 左右兩側使用絕對定位，中間設定margin值

方法三：flex

HTML結構

<div class="container">
    <div class="center">中間自適應</div>
    <div class="left">左側定寬</div>
    <div class="right">右側定寬</div>
</div>
複製程式碼

將container設定為彈性佈局，display:flex;

• container變為了flex容器，子元素center、left、right自動變為了flex item

.container {
  display:flex;
}
複製程式碼

調整item的位置

• 通過設定item的order屬性來調整位置
• order預設值為0，值越小item越靠前

.left {
  order: -1;
}
複製程式碼

左右兩側定寬

• 設定item的flex-basis屬性固定寬度

.left {
  flex-basis: 200px;
}
.right {
  flex-basis: 150px;
}
複製程式碼

center自動填充剩餘空間

• 設定item的flex-grow屬性為1，預設為0

.center {
  flex-grow:1;
}
複製程式碼

關鍵點

• 父元素設定為彈性盒子
• 左右兩側使用flex-basis設定元素本身大小
• 中間使用flex-grow設定佔滿剩餘空間