[譯] Flexbox 的使用場景

原文：Use Cases For Flexbox, by Rachel Andrew

攝影 | Free-Photos

本文是 Flexbox 系列的最後一篇文章。文本我將花時間說明 Flexbox 的使用場景，並且咱們如今還有 Grid 佈局，我會對如何在他們之間作選擇和各的使用場景作些說明和建議。

系列早期文章

若是你尚未讀這個系列的其餘文章的話，如今能夠先去看看一下。我先講了 當咱們在使用 display: flex 的時候，發生了什麼；第二篇則看了下 對齊，講了如何在主軸和交叉軸上作對齊操做；第三篇講了 Flexbox 中盒子尺寸的造成原理，以及瀏覽器默認是如何分配盒子尺寸的。如今咱們已經明白了 Flexbox 的工做原理，如今經過總結來思考它最適合的用例場景。

我該用 Grid 仍是 Flexbox 呢？

這是我在教授佈局過程當中，常常被問到的一個問題，我發現當人們開始漸漸習慣使用這些新的佈局方法後，這個問題就再也不是問題了。在你寫了許多組件樣式後，就會知道怎麼合理利用這些佈局方法了。

若是你非要弄清楚到底怎麼回事的，那麼你首先要記住的就是 Grid 佈局和 Flexbox 佈局都是 CSS。不論你是使用 dispaly: grid 仍是 display: flex，你使用的一般是它們較爲通用的部分，而非不一樣的部分。Grid 和 Flexbox 中都用到了 Box Alignment 規範中定義的屬性，它們二者都使用了 CSS 內在尺寸和外在尺寸詳細陳述各自的概念。

詢問該用 Grid 仍是 Flexbox，就像是詢問我是應該用 font-size 仍是 color 。答案是按照須要，二者均可以使用。若是你不當心用錯了，也不會有人怪你的（效果老是有的嘛，靈不靈活另說）。

所以，咱們不是在 Vue.js 和 React.js 之間選擇，也不是在 Bootstrap 和 Foundation 之間作選擇。咱們只是使用 CSS 去佈局，使用最適合咱們當前設計的那一部分 CSS 特性。考慮每一個組件使用哪種佈局最合適，或者使用哪一種組合方式會產生最好的佈局效果。

它多是 Grid，也多是 Flexbox。可能外部是一個 Grid 容器，Grid 項目中某一些是 Flex 項目，或者反過來。若是設計須要，在一個 Flex 項目中嵌套一個 Grid 容器是沒問題的。

Flexbox 是用來幹什麼的？

Flexbox 規範中是這樣描述的：

「Flexbox 表面上跟塊佈局（block layout）很像。但它缺少許多能夠在塊佈局中使用的以文本或文檔爲中心的複雜屬性，好比浮動和列（cloumns）。相反，它使用簡單而強大的工具，處理複雜 Web 應用中常常遇到的空間分配和內容對齊問題。」

我認爲這裏的關鍵字是「空間分配和內容對齊」。Flexbox 把一堆東西（有不一樣的尺寸）包括在一個容器中（容器自己的尺寸也是可能改變的）。Flexbox 很是溫柔，它嘗試爲全部項目找到最佳的顯示方式，給大的項目分配更多的空間，小的項目則被分配較少的空間，以便保證內容的可讀性。

當你在某一時刻會感受使用 Flexbox 很不順手或不舒服的時候，說明你正在將 Flexbox 做爲網格系統使用——嘗試控制尺寸和空間的分配。此種狀況，你就是在跟 Flexbox 的自然彈性特質作反抗。

所以，適合 Flexbox 的場景是，你不是在佈局一個精確到像素級別的 Flex 項目，只是想讓這些項目一個個挨着、體面的排列好就好了。

See the Pen Smashing Flexbox Series 4: Items Sharing Space by Rachel Andrew

另外一個會遇到的場景是項目折行，但你不想要一個嚴格的網格式折行（就是對的一齊一齊的）。咱們可使用 Grid 中爲咱們提供的創造性關鍵字 auto-fill 來與折行的 Flexbox 佈局例子作下對比。就能立馬看出它們的不一樣點。

在 Grid 佈局案例中，Grid 項目在行和列上都是一一對齊的，雖然 cloumn track 的數量在改變（依賴於當前空間），可是 Grid 項目都是根據當前的可用空間佈局下一個 Grid 單元格的位置。實際上，咱們沒法讓一個 Grid 項目跨列（span tracks），即便在這種自動流（auto-flow）的場景，存在一些空的單元格位置。

See the Pen Smashing Flexbox Series 4: Grid Example by Rachel Andrew

Flexbox 佈局例子中，最後一個 Flex 項目則會佔據滿那一行裏的剩餘空間。這樣的話，咱們就無法作水平或者垂直方向上的對齊了。

See the Pen Smashing Flexbox Series 4: Wrapped Items flex-basis: auto by Rachel Andrew

若是使用的是 flex-basis auto（上面 Flex 項目使用的是 flex: 1 1 150px;），那麼內容多的 Flex 項目會分得更多的空間，所以行與行之間的對齊效果就很是不一樣了。

See the Pen Smashing Flexbox Series 4: Wrapped Items by Rachel Andrew

固然，也有比較適合使用 Flexbox 佈局而非 Grid 佈局的場景。好比咱們須要項目折行顯示，同時逐行按照自身狀況爲項目分配空間。這是一種不一樣形式的「網格佈局」。對應到真實場景好比說有一系列的標籤（由一或兩個單詞組合而成的以集合的形式顯示的一組元素），它們每一個只是佔據了須要的空間，不會強制在一個嚴格的網格佈局之中。

See the Pen Smashing Flexbox Series 4: Tags example by Rachel Andrew

如今，Flexbox 是最好的操做容器中項目水平、垂直居中的方法。

See the Pen Smashing Flexbox Series 4: Center an Item by Rachel Andrew

將來（在彈性佈局以外，瀏覽器還支持 Box Alignment 屬性的話），咱們可能在不須要添加 dispplay: flex 的時候， 就能實現這個效果。如今，咱們仍是要這樣寫——不過多出的這一行代碼也沒啥的。

Flexbox 很是適合處理一行的、包含一組組件的樣式佈局。咱們在不須要在乎每一個項目尺寸的狀況下就能夠靈活的實現信息的佈局，好比表單控件集合或者 ICON 集合。

See the Pen Smashing Flexbox Series 4: Simple Row of Form Elements by Rachel Andrew

還有一個你會選擇 Flexbox 的場景就是在內容不滿一屏的佈局中，將底部元素內容固定在底部。下面例子中，容器是 Flex 容器，Flex 項目按照 column 方向佈局，咱們設置中間部分的內容塊是可延伸（grow）的，這樣底部內容就被推倒視口的最下面了。

See the Pen Smashing Flexbox Series 4: Sticky Footer Card by Rachel Andrew

生產環境下，咱們發現 Flexbox 佈局很是適合用來作一些細小的工做，好比用來作好對齊，在項目之間很好地分配空間。固然，對於這這些事情，你也能夠用「一維式 Grid 佈局」來實現，而不用擔憂說這樣用對仍是不對。

Flexbox 表現上另外作的很好的一點就是，當咱們有一天突然在以前的設計以外再添加東西時候很是有幫助。好比，咱們設計了一個導航欄組件，若是使用的是 Grid，那麼咱們須要爲全部的導航項目設計好咱們的 Tracks ，當「項目多起來」的話，按照以前的設計，項目就會折行，打咱們不但願折行。用 Flexbox 的話，狀況就不同了，使用 Flexbox，咱們不論將項目 flex-basis 設置爲 0 仍是 auto ，最終的佈局結果都是靈活的，已有的項目會爲新加入的項目騰出空間展現。

何時我不會使用 Flexbox？

上面我介紹了使用彈性佈局（而非網格佈局）的場景，如今咱們來看一些不適合使用 Flexbox 佈局的場景。咱們已經看見了一行一行排列的項目，在垂直或水平方向上對齊的例子。這就是第一個咱們要與 Grid 佈局區別的地方。

網格佈局屬於二維佈局，能同時實如今行和列上的對齊。Flexbox 則屬於一維佈局，多行 Flex 項目的 Flex 容器是逐行分配空間的，每一行（flex line）在表現上都像是一個新的 Flex 容器。

所以若是你的組件須要在二維上進行佈局，無論組件自己是大是小，你最好使用 Grid 而非 Flexbox。讀完這篇文章，也是我最想讓你知道的一件事就是，千萬不要有這種想法：Grid 主要是負責頁面主體佈局的，而 Flexbox 則主要負責組件佈局的。實際狀況是，你能夠有一個很小組件使用的是 Grid 佈局，而主體頁面結構使用的則是 Flexbox 佈局。

另外一個考慮 Gird 纔是較好佈局方案的場景是：爲了跟毗鄰行上的 Flex 項目產生對齊效果，你給 Flex 項目設置一個 width 或者給項目設置同一個長度的 flex-basis，這樣作的目的就是爲了限制彈性效果。這一般表示你須要是一個二維佈局方案，來自於 Grid 容器的控制會更合適些。

固然，經過限制 Flex 項目的彈性特質，咱們可讓 Flex 佈局看上去像是網格。舉個例子，將 flex-grow 設置爲 0，給 Flex 項目一個百分比尺寸，按照一樣方式，咱們能製造出一個「浮動的網格」效果。若是你發現你正在作這些，我建議你仍是使用 Grid 佈局，Grid 很是適合這類佈局。

See the Pen Smashing Flexbox Series 4: Wrapped Flex Items with Percentage Widths by Rachel Andrew

最後須要記住的是，針對同一個問題，一般不會有很是清楚的錯誤或正確答案。咱們惟一能作的就是多作嘗試，看看這個組件到底適合何種佈局。固然也能夠切換佈局方法，在某個斷點下使用 Flexbox 佈局，而在另外一個斷點下使用 Grid 佈局。

總結

我但願這一系列的幾篇文章，可以幫助你理解 Flex 項目在對齊和尺寸分配上的疑惑，讓你在使用彈性佈局時更加駕輕就熟。若是你仍是沒有理解或是對該使用哪一種佈局方法抱有不肯定的態度，歡迎在下方評論區留言。

（完）