使用 Flex 佈局與其餘普通佈局的簡單對比

最近使用 flex 佈局來作各類居中真的帶來了很多方便，如今來總結一下平時的普通佈局是怎樣使用 flex 佈局來實現同樣的效果。

1、左右 1:1 佈局

佈局：

<div class="container">
  <div class="child">LEFT</div>
  <div class="child">RIGHT</div>
</div>
複製代碼

利用 float 屬性

在使用 flex 以前，實現這種佈局主要是利用 float 屬性，使元素脫離文檔流，同時由於要實現 1:1 的比例，要將子元素的 width 設爲 50%。同時要記得在後面的元素添加 clear:both 屬性。

.container {
  margin: 40px;
  height: 600px;
}

.child {
  width: 50%;
  height: 100%;
  float: left;

  box-sizing: border-box;
  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
複製代碼

利用 flex-basis

若是使用 flex 佈局，要將容器（父元素）display 設爲 flex，項目（子元素）設定 flex-basis 值爲 50%就能夠實現 1:1 佈局了，這個屬性和 width 做用差很少，主要是指定 flex 元素在主軸方向上的初始大小。

.container {
  margin: 40px;
  height: 600px;
  display: flex;
  flex-direction: row;
}

.child {
  height: 100%;
  flex-basis: 50%;

  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
複製代碼

利用 flex: 1

當 flex 取值爲一個非負數字，則該數字爲 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%。因而就能夠在子元素上使用 flex: 1 來實現平均佈局，而且對於不一樣數量的子元素都適用。謝謝 @pingan8787

.container {
  margin: 40px;
  height: 600px;
  display: flex;
  flex-direction: row;
}

.child {
  height: 100%;
  flex: 1;

  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
複製代碼

2、左中右 1:1:1 佈局

實現方法其實和上面差很少，都是使用 float 和 flex-basis 屬性來指定比例爲 33.3%來實現。

佈局：

<div class="container">
  <div class="child">LEFT</div>
  <div class="child">MIDDLE</div>
  <div class="child">RIGHT</div>
</div>
複製代碼

利用 float 屬性

.container {
  margin: 40px;
  height: 600px;
}

.child {
  width: 33.3%;
  height: 100%;
  float: left;

  box-sizing: border-box;
  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
複製代碼

利用 flex: basis

.container {
  margin: 40px;
  height: 600px;
  display: flex;
  flex-direction: row;
}

.child {
  height: 100%;
  flex-basis: 33.3%;

  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
複製代碼

利用 flex: 1

和上面的左右佈局代碼同樣，比 flex-basis: 33.3% 好，推薦使用。

3、水平居中佈局

佈局：

<div class="container">
  <div class="child">CHILD</div>
</div>
複製代碼

利用 margin

相信大部分人都知道對於塊級子元素利用簡單的margin: 0 auto就能實現了吧，這就很少介紹了。

.container {
  margin: 40px;
  height: 600px;
}

.child {
  height: 100%;
  width: 50%;
  margin: 0 auto;

  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
複製代碼

利用 flex 佈局

主要起做用的屬性是 justify-content，它定義了項目在主軸上的對齊方式，因此只需把它設爲 center 就能實現了，前提是父元素的 flex-direction 屬性爲 row，不過默認就是 row。

.container {
  margin: 40px;
  height: 600px;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%;
  width: 50%;

  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
複製代碼

4、垂直居中佈局

對於通常來講，都是利用上下padding來實現垂直居中，不多會有父元素height值爲固定值這種需求。這裏爲了體現flex的特性，特意對比在父元素height值固定的狀況下如何實現垂直居中。

佈局：

<div class="container">
  <div class="child">CHILD</div>
</div>
複製代碼

利用 line-height

對於垂直居中就沒有水平居中這麼好寫了，我平時主要是設置 line-height 配合 inline-block 這種方法來實現的。

將父元素 line-height 設爲其 height 的值，而且將子元素的 display 屬性設爲 inline-block，再利用 vertical-align 將本身定位在父元素垂直軸上中心就可實現了。可是要記得將子元素的 line-height 初始化（initial），由於 line-height 默認是繼承父元素的值的。

.container {
  margin: 40px;
  height: 600px;
  border: rgb(65, 184, 131) 8px solid;
  line-height: 600px;
  text-align: center;
}

.child {
  display: inline-block;
  height: 50%;
  width: 80%;
  vertical-align: middle;
  line-height: initial;
  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  color: rgba(255, 255, 255, 0.7);
  font-size: 40px;
}
複製代碼

利用 flex 佈局

若是使用 flex 就很簡單了，要控制父元素的 align-items 屬性便可，它主要定義項目（子元素）在交叉軸上如何對齊。

.container {
  margin: 40px;
  height: 600px;
  border: rgb(65, 184, 131) 8px solid;

  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  height: 50%;
  width: 80%;

  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  color: rgba(255, 255, 255, 0.7);
  font-size: 40px;
  text-align: center;
}
複製代碼

利用 table

小結

flex佈局對於作各類居中帶來了不小方便，同時現在現代瀏覽器對其兼容性也不錯了。最後推薦兩篇乾貨文章。

• 阮一峯：Flex 佈局教程（語法篇）
• 顏海鏡：CSS實現水平垂直居中的1010種方式