Bootstrap4 彈性盒Flexbox

彈性盒(Flexbox)是Bootstrap4最新支持的特性，Bootstrap 4 通過 flex 類來控制頁面的布局。

在Bootstrap4中，只需用少量變量或者交換一下樣式表就可以使用這個嶄新的CSS布局樣式。

它包含了什么？

在一系列Bootstrap4的組件中，彈性盒支持都是可用的。

• 整個網(wǎng)格系統(tǒng)（混合和預(yù)定義的類），float變換成display: flex;。
• 輸入框組，由display: table;變成display: flex; 。
• 媒體組件display: table;和一系列hacky樣式變換到簡單的display: flex;。

通過Grunt，我們編譯的 CSS 里面通過 Autoprefixer 提供第三方前綴。

為什么要用彈性盒

一言蔽之，flexbox在CSS中提供了更加簡單、靈活多變的布局選項，更具體一點，它提供了下面這些：

• 在父元素里面內(nèi)容的簡單的垂直對齊。
• 通過使用媒體查詢，可以簡單的根據(jù)設(shè)備和屏幕分辨率來對內(nèi)容重新排序。
• 只用 CSS 在網(wǎng)格系統(tǒng)中實現(xiàn)等高列的布局。

所有這些東西不用彈性盒也能夠?qū)崿F(xiàn)，但是通常需要使用額外的hacks以及變通來實現(xiàn)它。

工作機制

如果你對在Sass中修改變量很熟悉，或者對其它CSS預(yù)處理器很熟悉，那么你將能夠自如地遷移到彈性盒模型。

1. 打開 _variables.scss 這個文件，找到 $enable-flex 這個變量。
2. 把值由 false 改為 true。
3. 重新編譯，搞定了！

此外，如果你不需要Sass的源代碼文件，默認(rèn)的Bootstrap編譯的CSS你可以替換掉編譯的彈性盒變量。

瀏覽器支持

啟用彈性盒意味著減少了支持的瀏覽器和設(shè)備：

• Internet Explorer 9 及其以下不支持彈性盒。
• Internet Explorer 10 有一些已知的問題，需要使用 prefix，這只支持老的 2012 版本語法。

當(dāng)你在你的項目中啟用彈性盒的時候請務(wù)必注意你的用戶群體。訪問 Can I use… 來了解更多瀏覽器對彈性盒的支持細(xì)節(jié)。