您使用 flexbox嗎?上周我在 twitter 上，問了這個(gè)問題，很驚訝地發(fā)現(xiàn)，不少于 50%的人回答是。之所以感到驚訝是因?yàn)椋钡阶罱也⒉辉谖业娜魏雾?xiàng)目中使用 flexbox ，我想我一定是唯一的一個(gè)。
我不使用 flexbox 有幾個(gè)原因。但是，經(jīng)過一些調(diào)查研究之后，我的擔(dān)憂得到明顯的減弱，我已經(jīng)開始了轉(zhuǎn)變。所以這里有你應(yīng)當(dāng)開始使用Flexbox的六個(gè)理由。
所有主流瀏覽器均支持
我還沒有使用Flexbox的主要原因是我認(rèn)為缺乏瀏覽器的支持。但事實(shí)上，F(xiàn)lexbox以95.89％的比率在全球?yàn)g覽器得到了很好的支持。如果你不考慮IE 10及以下的版本，Microsoft表示現(xiàn)在可以這樣認(rèn)為，這個(gè)數(shù)字甚至可以更高。

Flexbox相比其他功能具有更高的支持性，例如我現(xiàn)在仍然使用的2D transforms(支持率為91.85%)，或者position:fixed(支持率為92.98%).
不必?fù)?dān)心語(yǔ)法
雖然所有瀏覽器的最新版本均支持Flexbox目前的語(yǔ)法，那老版本的支持如何呢？因?yàn)檎Z(yǔ)法的改變已經(jīng)半年多了，在書寫方面存在一些不一致的地方。為了支持所有瀏覽器目前最后的兩個(gè)版本，我們將不得不使用不同供應(yīng)商前綴，每條規(guī)則至少書寫4個(gè)不同的版本。
關(guān)于這個(gè)問題，我的解決方案是只需使用autoprefixer。跟蹤最好使用哪個(gè)供應(yīng)商前綴，不應(yīng)該占用我們的時(shí)間和精力，所以我們應(yīng)該將其設(shè)置為自動(dòng)化。
使用 autoprefixer
，我們可以指定我們想要支持的瀏覽器版本，然后他就會(huì)自動(dòng)添加相應(yīng)的供應(yīng)商前綴。

/* 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;
}

簡(jiǎn)單的開始
誠(chéng)然，學(xué)習(xí)所有flexbox 相關(guān)的知識(shí)并不是那么簡(jiǎn)單。它有12個(gè)新屬性，其中每個(gè)大約有 4個(gè)潛在值。當(dāng)然你可以一點(diǎn)一點(diǎn)的去理解掌握。
但是你并不需要去了解所有的屬性。因?yàn)樵诤芏嗲闆r下，我發(fā)現(xiàn)自己只需要使用 3 個(gè)屬性-
display
：將元素設(shè)置為內(nèi)聯(lián)或者塊flexbox容器元素
justify-content
： 控制 flex
容器內(nèi)項(xiàng)的水平對(duì)齊方式 (如果 flex
的默認(rèn)屬性為 row
或 row-reverse
)
align-items
: 控制 flex
容器內(nèi)項(xiàng)的垂直對(duì)齊方式 (如果 flex
的默認(rèn)屬性為 row
或 row-reverse
)

使用這些僅適用于 flex
容器的屬性，我們可以產(chǎn)生大量不同的布局。如果你想要了解更多相關(guān)知識(shí)，還有豐富的資源/屬性列表/幫助你學(xué)習(xí)的例子
Flexbox中文教程
Flexbox Playground：一個(gè)在線文檔，你可以驗(yàn)證每個(gè)屬性-值對(duì)的作用
Flexbox 完全指南(CSS 技巧): 所有 flexbox 概述
Flexbox Froggy: 學(xué)習(xí) CSS flexbox 的游戲
Flexbugs: flexbox 問題的列表以及解決他們跨瀏覽器問題的方法
Flexibility:支持舊版瀏覽器的一個(gè)polyfill

元素居中
除了 flexbox 良好的瀏覽器支持，我們還可以很輕松的實(shí)現(xiàn)元素在水平垂直居中問題。
僅僅需要3個(gè)聲明，我們就可以實(shí)現(xiàn)子元素完全居中:
.flex-container {
display: flex;
justify-content: center; /* horizontal centering /
align-items: center; / vertical centering */

  border: 2px dashed #000;
}

水平垂直居中

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

兩端對(duì)齊

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

項(xiàng)與項(xiàng)之間的均勻分布

我們甚至可以在不處理:first-child
或:last-child
的情況下，實(shí)現(xiàn)列表項(xiàng)的均勻分布：

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

列表項(xiàng)的均勻分布

簡(jiǎn)化了復(fù)雜性
究其Flexbox的創(chuàng)建原因，首先可能是因?yàn)檫@個(gè)原因，讓我們實(shí)現(xiàn)在盡可能少的聲明中創(chuàng)建復(fù)雜的布局。
在前面的例子中，我僅僅通過設(shè)置flex
容器樣式來實(shí)現(xiàn)。然而，我們可以通過設(shè)置 flex
項(xiàng)來實(shí)現(xiàn)更加精細(xì)的樣式調(diào)節(jié)。例如，定價(jià)表的通用布局:

簡(jiǎn)化了復(fù)雜性

這里有三個(gè) div
，中間div
的寬度是兩邊的兩倍。為了使用flexbox實(shí)現(xiàn)這種布局，我們可以這樣書寫。

.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;
}

關(guān)于Felxbox，我的意識(shí)已經(jīng)很晚了，但是我仍然相信還有許多人的思想沒有改變。您已經(jīng)使用 flexbox 了嗎?如果沒有，您是不是已經(jīng)被信服，要試一試呢?
本文根據(jù)@ireaderinokun的《6 Reasons to Start Using Flexbox》所譯，整個(gè)譯文帶有我們自己的理解與思想，如果譯得不好或有不對(duì)之處還請(qǐng)同行朋友指點(diǎn)。如需轉(zhuǎn)載此譯文，需注明英文出處：http://bitsofco.de/6-reasons-to-start-using-flexbox/。
如需轉(zhuǎn)載，煩請(qǐng)注明出處：http://www.w3cplus.com/css3/6-reasons-to-start-using-flexbox.html
Web最新資訊，請(qǐng)關(guān)注微信公眾號(hào)“一起玩前端”或掃描二維碼關(guān)注。