[CSS] 瀑布流難題

寫在最前面，多數情況下，網站的內容使用瀑布流的呈現方式並不多。而這種呈現方式，我記得好像是因為 Pinterest 而紅起來的（有錯誤請指正）。

為何說是難題？我只是想用這個來解釋 Flexbox, Grid 遇到的困難點。

瀑布流流去哪？

給我一個 Box

這個埂知道就知道，不知道的不要問。之所以叫做瀑布故名思義，就是由上到下（~~由左到右~~）的一種排列方式。主要是用於呈現 卡牌類型 的內容，每一張卡牌的寬度是相同的，然後高度不同，所以由上到下依序排列出多欄式的結構。

另一個比較廣為人知的名字，叫做 Masonry Layout，嗯，因為當年 Masonry 團隊，製作了一個 JQuery 的外掛，用的排版佈局就是瀑布流的格式，然後超紅。所以， Masonry Layout 就有點變成了瀑布流的代名詞。

比較熱門的就這幾家，

所以，瀑布其實也可以由左到右啦，螢幕轉個 90 度就好了。

網格系統的難題

首先，網格系統有個先天上的限制，這一點無論在 Flexbox 或 Grid 都成立。那就是每個區塊的尺寸會像是表格一樣，無法做到尺寸任意調整這件事情。也就是說，在網格系統下無法辦到瀑布流那種 破碎區塊 的編排。我之前在聊 Grid 的時候有提過，借個圖來用。

Grid

這樣的編排方式，即便是 Flexbox 的 flex-flow: row wrap 或 flex-flow: column wrap 編排，其結果都會是類似的。所以，如果要打破這種先天限制，就只能藉助 JavaScript 來操作。

我們來說說為什麼是難題。首先，其實 flex-wrap: wrap 在字面上看起來很好理解，所以，你覺得你真的理解他 wrap 了什麼東西嗎？

flex-flow: row wrap 以列為準的排序方式，他的 wrap 斷點在哪？
flex-flow: column wrap 以行為準的排序方式，他的 wrap 斷點在哪？

歐，台灣特別的用法，不然 column 好像是叫做欄，直式，而 row 叫做列，橫式。為了避免這種地區用語的不同，後續我都會用 row 與 column 來稱呼，比較不容易搞混。

剛剛的第一個問題，一般狀況下很容易理解，因為我們使用的裝置，都有一個 自然的最大寬度 。所以，以常用的瀏覽器而言，最大寬度不過就是你的螢幕尺寸而已，所以，對於 row 的斷點來說，就會是在 超出這個最大寬度 的地方，超出的區塊就會被切斷然後往下排去。

好了，那第二個問題呢？

當我們以 column 來排列的時候，

因為內容長度是不斷往下長，所以，他永遠不會被 wrap。

所以，當我們使用 column 又想要讓他可以被中斷，那麼就需要給他一個 受限制的最大高度 ，換句話說，你只要給他 max-height: 1000px ，這個時候，道理跟 row 相同，在超出 最大高度 的地方，超出去的就會被切斷往後排下去。

所以，如果要做一個類似 Pinterest 的結構並不困難，只要用點 @media 加上 row 搭配 column 就可以達成。但，如果要做到 破碎區塊 編排，基本上單純靠 CSS 還是無法做到。

強制中離

在 Flexbox 系統中，我們可以利用 flex-basis: 100% 的作法，來達到強迫中斷某個排列的目的。我們以 row 來看，所謂的強迫中斷，意思就是安插一個 寬度 100% 的物件在那邊，所以他會被切斷。至於缺點？你會看到區塊下方會產生留白，這也是為何無法做到瀑布流的一個問題。

至於使用 column 的方式，基本上 flex-basis: 100% 要有效，必須要有 絕對高度 的設定，也就是說，你必須要指定一個 height: 1000px 這樣的作法，他才會幫你中斷。至於缺點，你必須要設定 絕對高度 就是一個缺點。

大家都這麼聰明，應該會想到，是不是還有別招？有的，在 CSS Fragmentation Module Level 3 當中有列出來，但是目前還是超級草稿階段，另一個則是 CSS 2.1 就有的 page-break-*，

通常會看到 page-break-* 會直覺想到跟列印有關，不過對於 column 的排列方式來說，他確實也可以有效中斷。但是，以目前的狀況來說扣除 CSS Multi-column Layout Module Level 1 的情況，基本上能正確運作的好像 只有 Firefox 而已 。聽說 IE 也正常，但我沒測試，有興趣的人可以試試看，但新版本 Edge 應該不行，畢竟他是 Chrome 核心。