Bootstrap 4: 對比普通網格和 Flexbox 網格

　　我們都熟悉 Bootstrap 3 的風格系統，而 Bootstrap 4 帶來了一些網格系統的變化。其中包括新的 XL 網格等級，一些修飾類的變化，以及一個全新的 flexbox 版本的網格系統。

　　常規的網格系統和 flexbox 網格系統並不相容，每個人都得在他們的專案中選擇其中一個。為了幫助你決定如何選擇，這篇文章會關注兩個系統的區別。為了便於比較，我們還準備了一些分別實現了兩種網格模式的 示例。

　　1. 安裝

　　最常見的方式是通過 CDN 或本地檔案將 Bootstrap 包含在專案中。目前有 flex 版本和非 flex 版本可供選擇：

<!-- Original Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" >
 
<!-- Bootsrap With Flexbox Grid -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css" rel="stylesheet" >

　　對於想自己編譯 Bootstrap 的朋友，你需要在主 sass 配置檔案中開啟 $enable-flex 選項。

　　_variables.scss

$enable-flex = true;

　　關於檔案的大小，flexbox 版本會稍大一些，因為它有額外的規則和供應商要求加入的字首。然而它們的區別很小(119 KB 與 105 KB 的區別)，大多數情況下不會有什麼影響。

　　2. 基本網格

　　大家都知道如何使用 Bootstrap 網格。它有行的概念和列的概念，每行都被分隔為 12 個等分，列都在行中，而且可能包含 1-12 個這些等份。

<div class="row">
   <div class="col-xs-2">.col-xs-2</div>
   <div class="col-xs-4">.col-xs-4</div>
   <div class="col-xs-6">.col-xs-6</div>
</div>

　　新的 flexbox 模式提供了自動佈局的選項，只需要把列放在那，不需要特別指定大小。

<div class="row">
    <div class="col-xs">.col-xs</div>
    <div class="col-xs">.col-xs</div>
    <div class="col-xs">.col-xs</div>
</div>

　　flexbox 網路中沒有指定大小的列會均分可用的空間，並且總是佔滿整行。如果我們想讓一個列更大一些或者更小一些，仍然可以為它設定 .col-xs-size 類。

　　為了讓你直觀的瞭解這兩個系統，我們準備了 flex 和非 flex 風格的 演示。你可以在下面看到：

基本的 Flex 網格

　　3. 列的折行

　　行中的所有列加起來如果超過了 12，從第一個多出來的列開始會折到下一行。這被稱為列的折行，它在常規 bootstrap 和 flex-bootstrap 中以同樣的方式運作。

<div class="row">
   <div class="col-xs-6">.col-xs-6</div>
   <div class="col-xs-6">.col-xs-6</div>
   <div class="col-xs-3">.col-xs-3, This column will move to the next line.</div>
</div>

　　這裡唯一需要注意的是，使用 Flex 自動佈局時，沒有指定大小的列本來只佔少量空間，一旦折行就會佔據整行。

常規列的折行

　　4. 響應式的網格

　　前面介紹中提到，Bootstrap 4 在舊的網格級別上補充了新的 XL 級別的網格。現在網格的媒體查詢看起來就像這樣：

• 特別小 (xs) – 小於 576px

• 小 (sm) – 介於 576px 和 768px 之間

• 中 (md) – 介於 768px 和 992px 之間

• 大 (lg) – 介於 992px 和 1200px 之間

• 特別大 (xl) – 超過 1200px

　　沒有重大的響應式方面的變化是特別針對 XL 級別的，它在常規的網格和 flex 網格中作用相同。

響應式 Flex 網格

　　5. 列高

　　舊的網格系統由浮動元素構建，因此每列都有不同的高度，這取決於其中的內容。

常規網格中的列高

　　在 flexbox 佈局中，一行中的每一格都會向內容最高的那個對齊。

Flex 網格的列高

　　6. 水平對齊

　　非 flex 的 Bootstrap 基於一個偏移系統來對齊列。偏移系統的原理就像是空列，或者允許我們把列右移（比如，offset-xs-3 將列向右移 3 個單位的空間）。這可能有點煩人，因為需要我們手工調整位置。

<div class="row">
    <div class="col-xs-6 offset-xs-3">This column is now centered.</div>
</div>

　　幸好有 justify-content 屬性，flex-strap 的水平定位非常容易，只需要新增正確的類即可。

<div class="row flex-items-xs-center">
    <div class="col-xs-6">All columns in that row will be automatically centered.</div>
</div>

　　如果使用偏移，也可以做到！

Flex 網格的水平對齊

　　7. 垂直對齊

　　常規的 Bootstrap 網格中沒有垂直對齊的選項。想要進行垂直定準的唯一方法是自定義 CSS，不過這個方法常常造成混亂。

　　另一方面，Flexbox 佈局對齊方面做得非常棒，給了我們不只一個，而是兩個方法用於垂直定位：

　　垂直對齊整行：

<div class="row flex-items-xs-middle">
 	<div class="col-xs"> Middle </div>
</div>  
<div class="row flex-items-xs-bottom">
	<div class="col-xs"> Bottom </div>
</div>
<div class="row flex-items-xs-top">
	<div class="col-xs"> Top </div>
</div>

　　在行內對齊個別列：

<div class="row">
    <div class="col-xs flex-xs-middle"> Middle </div>
    <div class="col-xs flex-xs-bottom"> Bottom </div>
    <div class="col-xs flex-xs-top"> Top </div>
</div>

Flex 網格中垂直對齊

　　8. 對列重新排序

　　常規的網格系統中，如果我們想交換列的順序，需要使用 push 和 pull。雖然這不是最好的設計方案，但至少它起作用。

<div class="row">
    <div class="col-xs-4 push-md-8"> On MD screens this column will move 8 spaces to the right. </div>
    <div class="col-xs-8 pull-md-4"> On MD screens this column will move 4 spaces to the left.</div>
</div>

　　使用過 flexbox 的人知道有一個內建的 order 屬性。Bootstrap 在這個方法上實現了三個有關順序的類：

• .flex-xs-first– 首先顯示。

• .flex-xs-last– 最後顯示。

• .flex-xs-unordered– 在第一個和最後一個之間顯示。

　　完全不需要人工計算。如果你需要對3個以上的列排序（很少發生這種情況），你可以在 CSS 中使用 push 和 pull，或者 order 屬性。

對 Flex 列重新排序

　　小結

　　回顧文章中涉及的知識點，很顯然 flexbox 模式的網格系統更為先進和靈活。畢竟它包含了常規網格系統的一切，還包含了一些只有 flex 中才有的新特性。全面應用 bootstrap-flex 唯一的缺點是它不支援 IE9。

　　到這裡對 Bootstrap 4 網格系統的比較就結束了。請將演示頁面加入書籤，以便將來能迅速找到。我們希望這篇文章對你有所幫助。編碼愉快 :)

　　原文地址：http://tutorialzine.com/2016/11/boostrap-4-regular-vs-flex-grid/