对大部分的人来说（如果你写过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，其最大的优势是可在整体页面中为独立部分的自由布局。觉得不错？