前端未來頁面布局發展方向是 Flexbox 還是 Grid？

01-04

Flexbox目前支持的瀏覽器要比Grid多，但是FlexboxGrid flex的載入貌似有點問題，不知道未來的發展方向如何？
（另外求大神推薦幾個不錯的Flexbox和Grid布局的網站實例）

用WPF的時候，20年來都是grid套stack，那麼grid和flexbox大概也是同一個意思，沒有誰代替誰。

瀉藥，沒研究過。

不知道。

只好純扯扯蛋：

從規範編輯者角度來入手

CSS Flexible Box Layout Module Level 1

歷任編輯 Microsoft 、Opera、Mozilla、Google 的人都有。

CSS Grid Layout Module Level 1

歷任編輯 Microsoft、Mozilla、Google

其中微軟的人參與的比較多。

再看瀏覽器支持：

Grid： Can I use... Support tables for HTML5, CSS3, etc

Flexible Box：Can I use... Support tables for HTML5, CSS3, etc

Grid 基本上就IE10以後版本支持，可見跟規範歷任編輯所屬公司參與程度有關係，隱約指向這貨是微軟"喜愛"的東東么。

好在有 Google 的人說不好未來什麼時候 webkit 系的支持了也不好說。

Flexible Box 就不同了，基本上是全民（廠商）參與的節奏么，支持性也好的多。

所以吧，也就只能說 Flex 是現在時，Grid 或許是個將來時，以後的事兒誰知道呢。

然後你說的 Flex 載入有問題是，偶沒看懂。

是指它在有其它列進來時候縮小重現布局了一下么？

不知道它這個演示怎麼寫的樣式，所以仍然是不知道啊不知道。

如果非要扯點啥湊字數的話……那麼偶覺得挺正常啊，彈性盒么。

沒東西（沒有可計算的寬度）在旁邊的時候總要「彈一彈」的 = =||| 左右有可算出實際寬度的容器來了，自己只好就被擠扁扁了。

要不是這樣，不成固定盒了。

而 Grid 看規範示例內意思是劃分網格，猜它這個固定列寬了，所以，總體有多少列寬度是多少布局引擎開始就計算完成。然後就刷刷的填內容，不再需要重算布局位置了。

Flexbox 是一維布局系統，適合做局部布局，比如導航欄組件。Grid 是二維布局系統，通常用於整個頁面的規劃。二者從應用場景來說並不衝突。雖然 Flexbox 也可以用於大的頁面布局，但是沒有 Grid 強大和靈活。二者結合使用更加輕鬆。

---------廣告插入---------

更多關於 Flexbox 的優秀文章：

CSS3 Flexbox屬性可視化指南
Flexbox布局是如何工作的 – 用大彩圖和GIF動畫解釋
更多關於Flexbox布局如何工作的 – 用大彩圖和GIF動畫解釋
CSS3 Flexbox解決方案

更多關於 CSS Grid 布局的優秀文章

5分鐘學會 CSS Grid 布局
CSS Grid 布局完全指南(圖解 Grid 詳細教程)
如何使用 CSS Grid 快速而又靈活的布局

我覺得這兩個不是非要二選一的。可能兩個都會實現，然後在不同場景下選取更合適的那個。

某客戶，大老闆

打開了他n年前組裝的電腦

並且打開了他引以為豪的x游瀏覽器

而且。。還是沒升級過的。

跟我老闆說，你們做的網站在我的電腦上打不開。

然後我就屁顛屁顛的把flex box砍了

什麼flexbox 那是一個連box支持都有bug的坑啊。

所以

結論還是胳膊擰不過大腿。。。

客戶需要啥就做啥。。。

平時是用flexbox 用不上grid。基本都能解決。多弄弄手機上還能用。

需要grid的時候一般要設計跟我一起看，才好搞定。

誰知道他下個月會不會在中間給我加個什麼東西。。。errrr

國內的技術比國外慢一拍，所以肯定是先成熟的技術就流行起來了，我們不是還在用float嗎

一個再好的前端技術，能不能在現在或者將來不久被廣泛使用，得看瀏覽器廠商的推廣力度。

grid這小般的兼容性，你也敢用？你的產品真的是面向用戶的嗎？為了追求使用新技術，就不管其他用戶死活了？你們老闆得少賺多少錢？

再看flex，整體看起來還是不錯的，除了IE比較樂色之外，其他瀏覽器，無論是移動端、還是PC端，都是可以面向大多數用戶。

不能讓廣大用戶接受的技術，終將被歷史所淘汰。

不能讓老闆賺錢的程序員，終將被歷史所淘汰。

技術只是會越來越先進，至於什麼時候能支持，不是規範能決定的，應該是各大主流瀏覽器來決定，就拿flexbox來說，早期也僅是實驗性的，但目測現在主流瀏覽器或多或少都支持。而現在的grid就類似於當初的flexbox一樣。至於布局，要做到雜誌那樣的排版還是離不開shape這樣的。

另外一個就是案例，flexbox的案例在手機上常能看到了，而Grid現在還沒有實際項目使用吧（我還沒有看到過）。有關於這兩方面的資料，也收集過一些，感興趣的可以看看：

1、flexbox:flexbox | 博客自由標籤

2、Grid:css3 grid layout

css grid layout is coming.

Chrome Platform Status

https://developers.google.com/web/updates/2017/01/css-grid

占坑後面回答

兩者可以共存，行為應用場景並不完全重疊

整體的layout用grid，某個section用flex

Flex 和 Grid 並不是互斥的技術，相反，它們是互補的。

Flex 一般用來做 Page Components 的局部布局，而且一般只做一維的布局，比如導航欄。

Grid 則一般用來做二維平面的布局，通常用於整個頁面的規劃。

這也是這兩個技術發明的初衷，它們相輔相成，並行不悖。

不請自來，剛好看到這個，也感興趣。

Flexbox布局最適合應用程序的組件和小規模的布局，而Grid布局更適合那些更大規模的布局。

一個完整的Flexbox指南這個很完整，可以看看。

如果是移動端，我覺得grid很給力，一直想用，如果是PC端，玩玩還行，做項目還差好幾年呢，你知道ie8還有多少嘛

在 grid 和 flexbox 同時用的情況下，gird 用於布局，flexbox 用於布局內的微調，分工明確。

很喜歡flex 很容易上手，感覺非常強大。對於布局來說gride flex 沒有誰更加強大之分，至少我是這樣認為的，多種布局混合使用網頁才更加靈活。

Flexbox Grid

A grid system based on the flex display property.

官網：Flexbox Grid

我覺得這兩個技術都很牛逼了，我都喜歡

2016 年流行好用的 frontend framework 都趨向於合併 grid 和 flexbox，兩者結合使用。因為兩者並不重疊或衝突。2017 年會越來越多前端選擇適應 grid + flex 的設計，這樣的組合能更好地完成自適應，而且能降低 responsive design 的工作量。

Grid 可以做Flexbox做不了的事
Flexbox 可以做 Grid 做不了的事
他們可以共同工作。Grid item可以成為flexbox容器，flex item可以成為grid 容器。
Grid 可以嵌套 flex
Flexbox本質上從單一維度布局，行或列。 grid布局從雙維度行和列。