使用Flexbox的六個理由

您使用 flexbox嗎?上周我在 推ter 上，問了這個問題，很驚訝地發現， 不少于 50%的人回答是 。之所以感到驚訝是因為，直到最近，我并不在我的任何項目中使用 flexbox ，我想我一定是唯一的一個。

我不使用 flexbox 有幾個原因。但是，經過一些調查研究之后，我的擔憂得到明顯的減弱，我已經開始了轉變。所以這里有你應當開始使用Flexbox的六個理由。

所有主流瀏覽器均支持

我還沒有使用Flexbox的主要原因是我認為缺乏瀏覽器的支持。但事實上，Flexbox以95.89％的比率在全球瀏覽器得到了很好的支持。如果你不考慮IE 10及以下的版本， Microsoft表示現在可以這樣認為 ，這個數字甚至可以更高。

Flexbox相比其他功能具有更高的支持性，例如我現在仍然使用的 2D transforms(支持率為91.85%) ，或者 position:fixed(支持率為92.98%) .

不必擔心語法

雖然所有瀏覽器的最新版本均支持Flexbox目前的語法，那老版本的支持如何呢？因為語法的改變已經半年多了，在書寫方面存在一些不一致的地方。為了支持所有瀏覽器目前最后的兩個版本，我們將不得不使用不同供應商前綴，每條規則至少書寫4個不同的版本。

關于這個問題，我的解決方案是 只需使用 autoprefixer 。跟蹤最好使用哪個供應商前綴，不應該占用我們的時間和精力，所以我們應該將其設置為自動化。

使用 autoprefixer ，我們可以指定我們想要支持的瀏覽器版本，然后他就會自動添加相應的供應商前綴。

/* Write this */
.flex-container {
  display: flex;
}

/* Compiles to this (with autoprefixer set to support last 2 versions of all browsers) */
.flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

簡單的開始

誠然，學習所有flexbox 相關的知識并不是那么簡單。它有12個新屬性，其中每個大約有 4個潛在值。當然你可以一點一點的去理解掌握。

但是你并不需要去了解所有的屬性。因為在很多情況下，我發現自己只需要使用 3 個屬性-

• display ：將元素設置為內聯或者塊flexbox容器元素
• justify-content ： 控制 flex 容器內項的水平對齊方式 (如果 flex 的默認屬性為 row 或 row-reverse )
• align-items : 控制 flex 容器內項的垂直對齊方式 (如果 flex 的默認屬性為 row 或 row-reverse )

使用這些僅適用于 flex 容器的屬性，我們可以產生大量不同的布局。如果你想要了解更多相關知識，還有豐富的資源/屬性列表/幫助你學習的例子

• Flexbox中文教程
• Flexbox Playground ：一個在線文檔，你可以驗證每個屬性-值對的作用
• Flexbox 完全指南(CSS 技巧) : 所有 flexbox 概述
• Flexbox Froggy : 學習 CSS flexbox 的游戲
• Flexbugs : flexbox 問題的列表以及解決他們跨瀏覽器問題的方法
• Flexibility :支持舊版瀏覽器的一個polyfill

元素居中

除了 flexbox 良好的瀏覽器支持，我們還可以很輕松的實現元素在水平垂直居中問題。

僅僅需要3個聲明，我們就可以實現子元素完全居中:

.flex-container {
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center; /* vertical centering */

  border: 2px dashed #000;
}

更容易地操作內聯元素

關于內聯項定位問題就是臭名昭著的 額外的4個像素的外邊距 。雖然存在解決這個問題的方法，如浮動元素，但隨時就會出現新的問題。

使用Flexbox，我們就可以毫不費力地處理內聯元素。我們可以實現元素的 兩端對齊 對齊：

.flex-container { display: flex; }
.flex-item { width: 20%; }

我們可以實現 項與項之間的均勻分布

.flex-container {
  display: flex;
  justify-content: space-around;
}

我們甚至可以在不處理 :first-child 或 :last-child 的情況下，實現列表項的均勻分布：

.flex-container {
  display: flex;
  justify-content: space-between;
}

簡化了復雜性

究其Flexbox的創建原因，首先可能是因為這個原因，讓我們實現在盡可能少的聲明中創建復雜的布局。

在前面的例子中，我僅僅通過設置 flex 容器樣式來實現。然而，我們可以通過設置 flex 項來實現更加精細的樣式調節。例如，定價表的通用布局:

這里有三個 div ，中間 div 的寬度是兩邊的兩倍。為了使用flexbox實現這種布局，我們可以這樣書寫。

.flex-container {
  display: flex;
  align-items: center;
}

.flex-items:not(:nth-child(2)) {
  flex-grow: 1;
  height: 300px;
}

.flex-items:nth-child(2) {
  flex-grow: 2;
  height: 350px;
}

關于Felxbox，我的意識已經很晚了，但是我仍然相信還有許多人的思想沒有改變。您已經使用 flexbox 了嗎?如果沒有，您是不是已經被信服，要試一試呢?