Flexbox vs Twitter Bootstrap（或类似框架）[关闭]

Posted 2023-03-05

【中文标题】Flexbox vs Twitter Bootstrap（或类似框架）[关闭]

【英文标题】：Flexbox vs Twitter Bootstrap (or similar framework) [closed]

【发布时间】：2015-02-20 08:35:27

【问题描述】：

我最近在寻找使 div 具有相同高度的解决方案时发现了Flexbox，具体取决于最高的高度。

我在 CSS-tricks.com 上阅读了following page，它让我确信flexbox 是一个非常强大的学习和使用模块。然而，这也让我想到 Twitter Bootstrap（和类似框架）提供与其网格系统相同的功能（当然还有很多额外功能）。

现在，问题是：flexbox 的优缺点是什么？有没有什么是 Flexbox 不能做的，而像 Bootstrap 这样的框架可以做的（当然纯粹是在谈论网格系统）？在网站上实施时，哪个更快？

我猜只有在网格系统的情况下，纯粹使用flexbox 会更聪明，但是如果你已经在使用框架怎么办，flexbox 可以添加一些东西吗？

有什么理由选择flexbox 的“网格系统”而不是框架的？

【问题讨论】：

我使用 Flexbox 和 Bootstrap。

看看Zurb's Foundation For Apps。它完全建立在 Flexbox Grid System 之上

This 可能会有所帮助。 Bootstrap now switching from floats to flex

Bootstrap 4 现在默认为 flexbox！ Flexbox 是一个非常强大的布局工具，为网格系统和核心组件提供了无与伦比的灵活性和控制力。它的代价是放弃对 IE9 的支持，但对组件布局、对齐和大小进行了显着改进。

我不同意这应该基于意见关闭。提问者在寻找事实，而不是意见。 “flexbox 的优缺点是什么？”提问者（像我一样）试图确定每个系统的优点和缺点。

【参考方案1】：

出于几个原因，flexbox 比 bootstrap 好得多：

Bootstrap 使用浮动来制作网格系统，许多人会说这不适用于 Web，而 flex-box 则相反，它通过保持项目大小和内容的灵活性来实现；与使用像素与 em/rem 的区别相同，或者仅使用边距和填充来控制 div，而从不设置预定义的大小。

Bootstrap，因为它使用浮点数，每行后都需要 clearfix，否则你会得到不同高度的未对齐 div。 Flex-box 不这样做，而是检查容器中最高的 div 并坚持其高度。

我会在 flex-box 上使用 bootstrap 的唯一原因是缺乏浏览器支持（主要是 IE）（已经死了）。有时即使 Chrome 和 Safari 使用相同的 webkit 引擎，您也会得到不同的行为。

编辑：

顺便说一句，如果您面临的唯一问题是等高列，那么有很多解决方案：

您可以在父级上使用display: table，在子级上使用display: table-cell;。见How to get same height in display:table-cell

您可以在每个 div 上使用绝对定位：position: absolute; top: 0; bottom: 0;

还有 jquery/JS 的解决方案，还有一个暂时想不起来的解决方案，以后会尝试添加。

编辑 2：

还可以查看http://chriswrightdesign.com/experiments/flexbox-adventures/ 和https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties 了解 flex-box 的工作原理。

编辑 3： https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

编辑 4： https://caniuse.com/#feat=flexbox

【讨论】：

感谢您的评论。我找不到任何关于两者中“更好”的解释，所以我希望我的问题（以及你和未来的答案）能帮助人们做出决定。幸运的是，IE 11 现在的市场份额比前三个版本加起来还要大（其中 IE10 支持flexbox），所以在我看来它是安全的。您对结合使用框架和flexbox 有何看法？当然，在使用时忽略框架的网格系统。

Flexbox 可用于以更简单的方式创建更强大的网格系统，但它本身并不是一个网格系统。 Better, Simpler Grid Systems 展示了一些想法，ZURB Foundation for Apps 使用 flexbox 进行布局

实际上，如果您愿意，您可以同时使用这两种方法，我认为这是最好的选择，因为您不需要将注意力集中在您已经习惯了很长一段时间的事情上（例如那些除了 BS 什么都不知道的人），但对我来说 flex-box 的卖点是它具有相同的灵活性，你只能通过使用 JS 而无需编写任何代码。

完整兼容性数据：caniuse.com/#feat=flexbox 请注意，旧版 android 也存在问题。

dam ，我以为我们几乎可以使用它了，似乎还需要一年或其他时间 b4 我们在野外看到它，谢谢提醒。

【参考方案2】：

我没有使用过 Flexbox（我已经阅读过它并且看起来很棒），但我是一个 Bootstrap 前端开发人员。我建议您在做出最终决定之前测试 Flexbox 打印页面。你知道...有时打印样式令人头疼，当我必须设计打印格式时，Bootstrap 帮了我很多。

【讨论】：

这正是您将浮动网格仅用于可打印 div 和引导打印类的原因

【参考方案3】：

恐怕你错过了another article on CSS tricks：

注意：Flexbox 布局最适合应用程序的组件和小规模布局，而 Grid 布局适用于较大规模的布局。

并不是说，你可以不尝试，只是三思而后行。最终一切都取决于所需的浏览器支持。

【讨论】：

确保您理解这篇文章是在谈论一种新兴的网格布局——而不是引导程序的网格。

必须说我确实错过了！ :) 谢谢指正。

赞成，您已经指出了一个非常明确的区别，即如何使用 flex box 和 grid 而不会发生意图和目的冲突，对我来说，您的意思是 bootstrap grid 还是 grid ayout 并不重要