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

Question

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

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

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

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

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

Answer 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

Answer 2

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

Answer 3

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

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

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