您使用 flexbox嗎?上周我在 twitter 上薄嫡，問了這個問題氧急，很驚訝地發(fā)現(xiàn)，不少于 50%的人回答是毫深。之所以感到驚訝是因為吩坝，直到最近，我并不在我的任何項目中使用 flexbox 哑蔫，我想我一定是唯一的一個钉寝。
我不使用 flexbox 有幾個原因弧呐。但是，經(jīng)過一些調(diào)查研究之后嵌纲，我的擔憂得到明顯的減弱俘枫，我已經(jīng)開始了轉(zhuǎn)變。所以這里有你應當開始使用Flexbox的六個理由疹瘦。
所有主流瀏覽器均支持
我還沒有使用Flexbox的主要原因是我認為缺乏瀏覽器的支持崩哩。但事實上巡球，F(xiàn)lexbox以95.89％的比率在全球瀏覽器得到了很好的支持言沐。如果你不考慮IE 10及以下的版本，Microsoft表示現(xiàn)在可以這樣認為酣栈，這個數(shù)字甚至可以更高险胰。
Flexbox相比其他功能具有更高的支持性，例如我現(xiàn)在仍然使用的2D transforms(支持率為91.85%)矿筝，或者position:fixed(支持率為92.98%).
不必擔心語法
雖然所有瀏覽器的最新版本均支持Flexbox目前的語法起便，那老版本的支持如何呢？因為語法的改變已經(jīng)半年多了窖维，在書寫方面存在一些不一致的地方榆综。為了支持所有瀏覽器目前最后的兩個版本，我們將不得不使用不同供應商前綴铸史，每條規(guī)則至少書寫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個潛在值疗涉。當然你可以一點一點的去理解掌握。
但是你并不需要去了解所有的屬性吟秩。因為在很多情況下咱扣，我發(fā)現(xiàn)自己只需要使用 3 個屬性-
display
：將元素設置為內(nèi)聯(lián)或者塊flexbox容器元素
justify-content
： 控制 flex
容器內(nèi)項的水平對齊方式 (如果 flex
的默認屬性為 row
或 row-reverse
)
align-items
: 控制 flex
容器內(nèi)項的垂直對齊方式 (如果 flex
的默認屬性為 row
或 row-reverse
)
使用這些僅適用于 flex
容器的屬性，我們可以產(chǎn)生大量不同的布局涵防。如果你想要了解更多相關知識闹伪，還有豐富的資源/屬性列表/幫助你學習的例子
Flexbox中文教程
Flexbox Playground：一個在線文檔沪铭，你可以驗證每個屬性-值對的作用
Flexbox 完全指南(CSS 技巧): 所有 flexbox 概述
Flexbox Froggy: 學習 CSS flexbox 的游戲
Flexbugs: flexbox 問題的列表以及解決他們跨瀏覽器問題的方法
Flexibility:支持舊版瀏覽器的一個polyfill
元素居中
除了 flexbox 良好的瀏覽器支持，我們還可以很輕松的實現(xiàn)元素在水平垂直居中問題偏瓤。
僅僅需要3個聲明杀怠，我們就可以實現(xiàn)子元素完全居中:
.flex-container {
display: flex;
justify-content: center; /* horizontal centering /
align-items: center; / vertical centering */
border: 2px dashed #000;
}
更容易地操作內(nèi)聯(lián)元素
關于內(nèi)聯(lián)項定位問題就是臭名昭著的額外的4個像素的外邊距。雖然存在解決這個問題的方法厅克，如浮動元素赔退，但隨時就會出現(xiàn)新的問題。
使用Flexbox证舟，我們就可以毫不費力地處理內(nèi)聯(lián)元素硕旗。我們可以實現(xiàn)元素的兩端對齊對齊：
.flex-container { display: flex; }
.flex-item { width: 20%; }
我們可以實現(xiàn)項與項之間的均勻分布
.flex-container {
display: flex;
justify-content: space-around;
}
我們甚至可以在不處理:first-child
或:last-child
的情況下，實現(xiàn)列表項的均勻分布：
.flex-container {
display: flex;
justify-content: space-between;
}
簡化了復雜性
究其Flexbox的創(chuàng)建原因女责，首先可能是因為這個原因漆枚，讓我們實現(xiàn)在盡可能少的聲明中創(chuàng)建復雜的布局。
在前面的例子中抵知，我僅僅通過設置flex
容器樣式來實現(xiàn)墙基。然而，我們可以通過設置 flex
項來實現(xiàn)更加精細的樣式調(diào)節(jié)刷喜。例如残制，定價表的通用布局:
這里有三個 div
，中間div
的寬度是兩邊的兩倍掖疮。為了使用flexbox實現(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;
}
關于Felxbox，我的意識已經(jīng)很晚了，但是我仍然相信還有許多人的思想沒有改變惶岭。您已經(jīng)使用 flexbox 了嗎?如果沒有撕捍，您是不是已經(jīng)被信服，要試一試呢?
本文根據(jù)@ireaderinokun的《6 Reasons to Start Using Flexbox》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉(zhuǎn)載此譯文字支，需注明英文出處：http://bitsofco.de/6-reasons-to-start-using-flexbox/。
如需轉(zhuǎn)載奸忽，煩請注明出處：http://www.w3cplus.com/css3/6-reasons-to-start-using-flexbox.html
Web最新資訊堕伪，請關注微信公眾號“一起玩前端”或掃描二維碼關注。
