資訊專欄INFORMATION COLUMN
摘要：其設計初衷并不是完備的網格系統。所以禁止將其作為一個完整的網格系統使用。但貓有四條腿，而人類只有兩條。總而言之，還是很棒的真的很有用。
對大部分的人來說（如果你寫過CSS），Flexbox 可以說是完美，但它是否適合所有場景呢？
簡而言之，我會給出幾種可用的場景，需要你重新思考 Flexbox 模型的使用。
順便說一句，本人是 Flexbox 的忠實粉絲，曾寫過一篇 Flexbox 詳解 ，可以算得上最全面的文章了。
當然，我們應該了解該如何使用 Flexbox，哪些情況不應該使用，以及用在哪些地方最好。
以下是我選出的最不應該是使用 Flexbox 的3種場景，并附帶原因。
1. 把Flexbox當作一個網格系統使用
長久以來，很多人（包括我自己）都在濫用 CSS 盒模型。
從復選框點擊 hack 到“純 CSS 圖形”，我們似乎沉浸在各種奇淫巧技中 —— 各種讓人覺得高大上或精通的技巧。
我并不反對這樣做，但其實我們曲解了 CSS 規范，不是嗎？
我們并沒有將它們用在應該用的地方 —— 主要原因之一是可以做，之二是不得不做。有時候僅僅是出于興趣（我覺得我屬于這種）。
也就是說，如果你選擇在布局中將 Flexbox 模型當作網格系統使用，那么就算曲解了規范。
還能不能開心的玩耍了？
你當然可以用，但就像濫用 CSS 盒模型。
其設計初衷并不是完備的網格系統。盡管你可以任意使用 Flexbox 模型，當然本人也曾瞎用，但其初衷不改。
網格布局 —— 在 2017 年火了，因為所有主流瀏覽器都開始支持。
可以在布局中將 Flexbox 作為唯一的網格系統使用嗎？
額！當然不可以。
為什么？
如果僅僅是為了一個怎么復雜的布局，或簡單的為了移動端而重構布局，確實有這種可能。
其實你可以擺脫這種想法的，雖然曾經我試過只用 Flexbox 就可以完成復雜的布局 —— 僅僅是因為可以做，并探索 Flexbox 的可能性。
有什么注意事項嗎？
有一點你一定要記住。
如果你不得不兼容老版本的 IE 瀏覽器（它們還能支持些什么好功能么？），那會有一個大問題，因為用戶什么都看不到 —— 任何東西都不會顯示。
但是，如果你在這些瀏覽器上使用 Flexbox 模型作為漸進增強，你的備用方案可能是表格布局，那么老版本 IE 用戶能正常使用。
Flexbox 也支持一些真正的 網格系統 才有的標準特性 —— 那些特性真的很棒。
盡管它還不太“標準”。此處的標準指的是就像圣杯布局那樣的常用。所以禁止將其作為一個完整的網格系統使用。
后面會繼續討論。
2. 完全控制其視覺位置
能力越大責任越大 ...然后濫用! (我加的).
網格布局最棒的特點之一就是無需考慮 html 源碼的順序而可以自由的指定內容的顯示位置。
難道 Flexbox 模型沒有順序屬性么?
其實是有的。
但貓有四條腿，而人類只有兩條。PS：此處的意思是，畢竟還是有區別，不能同等對待不同的事物，即使外觀類似.
上面的貓星人很帥，但即使套上了西裝，也還不是人類！毫無疑問，只有人才能算人類。
這就跟通過順序屬性實現“排序”的 Flexbox 一樣。
僅適用于簡單的重排場景，如下：
flexbox重排之前
flexbox重排之后
但是，它仍是基于元素的 html 源碼順序的。
所以，其實還是沒有脫離“貓人”的本質。
其對源碼順序的處理與 CSS 網格布局完全不同。網格布局是另一個話題，這里不會詳細討論。
3. 多列布局
我覺得應該不會有很多人會將 Flexbox 模型用來干這個，值得一提的是，除了Flexbox之外，CSS3 還提供其他增強布局方式 —— Flexbox 只是恰巧也能用來完成類似的功能。
如果你想這樣做，那么請考慮優先使用 CSS3 已提供的合適的布局方式。
i. 排除特定形狀
如果你需要構建復雜的布局，并想要讓內容按自定義區域排版或要特定幾何形狀來包裹內容，請使用正確的方法。雖然你可以將其包裹在 flex-item（彈性項）中，但還是要使用正確的方法處理排除和內容包裹。
ii. 實現多列
多列布局是 Indesign 等傳統桌面排版軟件的核心功能，當某列調整大小或不能包含所有內容時，列內的文本會自動流入另一列。
如果你需要在你項目中實現這個功能，CSS3 多列布局方式可以直接實現。
所以，啰嗦一句，請使用正確的方式來實現此功能。
可以讓多列布局的某列也同時具有 flex-item（彈性項）特性么？我沒有玩過 —— 不確定。
總而言之，Flexbox 還是很棒的！真的很有用。
非常有必要深入了解它，了解他們應該在何時何處使用。
對于 Flexbox，其最大的優勢是可在整體頁面中為獨立部分的自由布局。
覺得不錯？
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114464.html
摘要：技術前端布局推進劑間距規范化利用變量實現令人震驚的懸浮效果很棒，但有些情況不適用布局說可能是最全的圖片版學習網格布局使用的九大誤區圖解布局布局揭秘和中新增功能探索版本迭代論基礎談展望對比探究繪圖中撤銷功能的實現方式即將更改的生命周期幾道高 技術 CSS 前端布局推進劑 - 間距規范化 利用CSS變量實現令人震驚的懸浮效果 Flexbox 很棒，但有些情況不適用 CSS布局說——可能是最...
摘要：第一個主流的預處理器是年發布的，它提供了一個新的更簡潔的語法縮進代替大括號，沒有分號等等，同時增加了一些缺失的高級特性，像變量工具方法還有計算。 showImg(https://segmentfault.com/img/bV5u5I?w=533&h=300); 簡評：CSS 是一門入門比較簡單，但真正使用起來又很困難的語言（有些人認為它不應該稱為一門語言）。CSS 看起來凌亂復雜，其實...
閱讀 2809·2021-10-26 09:48
閱讀 1671·2021-09-22 15:22
閱讀 4028·2021-09-22 15:05
閱讀 608·2021-09-06 15:02
閱讀 2607·2019-08-30 15:52
閱讀 2107·2019-08-29 18:38
閱讀 2754·2019-08-28 18:05
閱讀 2332·2019-08-26 13:55
