2014-12-03 65 views
3

我試圖得到一個想法,如果我應該開始使用flexbox網站/ webapp佈局設計而不是浮動div等。用於頁面佈局的Flexbox?

但我收到混合消息。在一個網站上,他們說Flexbox現在是頁面佈局的「聖盃」: http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

然而Tab Atkins創建css3 flex規範的人有一個頁面,名爲「爲什麼flexboxes不適合頁面佈局」 http://www.xanthir.com/blog/b4580

我看了這個視頻:http://vimeo.com/98746172

所以我的結論是,他的意思是它不應該被用於複雜的頁面佈局。而且顯示:網格會更好。但是,網格可能需要幾年才能到達所有流行的瀏覽器。

所以我的問題是,現在是flexbox更好地創建頁面佈局比當前的解決方案(div浮動,顯示:表格單元格,內嵌塊等),是flexbox我應該使用直到電網出來?

p.s我知道flexbox與舊版瀏覽器不兼容。但我在這裏假設性地談論這個問題,讓我們假設這不是問題。

+0

它可能取決於您試圖獲得什麼樣的佈局,但一般來說我沒有看到使用flexbox進行佈局的問題。 – rdoyle720 2014-12-03 21:55:46

+0

'display:flex'只是工具箱中的另一個工具 - 主要用於組織一排相似的元素。在適當的地方使用它,但作爲一般規則,不要考慮整個頁面佈局。正如你所說,這就是網格的用途。 – 2014-12-03 22:19:02

+0

這些網格看起來很圓滑,但似乎只有IE10 +支持http://caniuse.com/#feat=css-grid – mpen 2014-12-04 00:52:55

回答

1

我想你們誤解了菲利普Flexbox解決方案。他沒有說flexbox是佈局的聖盃,佈局本身被稱爲聖盃。

選項卡提供了一些優點,但這並不意味着Flexbox不是我們目前針對特定佈局的最佳解決方案。

簡單

將一個Flexbox,就使你的HTML或CSS更簡潔,更容易理解和維護?使用flexbox可以讓你消除黑客行爲,例如刪除內聯塊元素上的空白或通常需要display: table的額外標記。

性能

Flexbox的元件是慢一點呈現比浮動或內聯塊元件。但是,除非您的頁面上有數百個Flexbox,否則這是您在優化頁面速度時需要考慮的最後一件事。有時使用flexbox可以大幅減少CSS的數量。

靈活性

Flexboxes非常靈活(雙關不打算)。您可以使用其他方法重新排列可能非常困難或不可能的元素順序。

當做簡單的事情,如雙列布局,我仍然會使用浮動。也就是說,如果您需要Flexbox爲您的佈局提供的功能,或者它簡化了您的HTML或CSS,那就去做吧!從長遠來看,網格佈局可能更適合,但是它們還沒有在大多數瀏覽器中實現。