Flexbox vs Bootstrap (或类似框架)

我最近发现 Flexbox时，我正在寻找一个解决方案，使 div 相同的高度，取决于最高的一个。

我已经在 CSS-trick s.com 上阅读了 下页，它使我确信 flexbox是一个非常强大的学习和使用模块。然而，它也让我想到了这样一个事实，即 Bootstrap (和类似的框架)为他们的网格系统提供了类似的功能(当然还有很多额外的功能)。

现在的问题是: flexbox的优点和缺点是什么？有没有什么是 Flexbox 做不到的，而 Bootstrap 这样的框架却可以做到的(当然，纯粹是谈论网格系统) ？在网站上实现哪一个更快？

我猜想，如果只针对网格系统，纯粹使用 flexbox会更明智，但是如果您已经在使用框架，那么 flexbox是否可以添加一些内容？

是否有任何理由选择 flexbox的“网格系统”而不是框架的？

70980 次浏览
小开

出于以下几个原因，Flexbox 比 bootstrap 好得多:

  • Bootstrap 使用浮点数来制作网格系统，很多人会说这不适合网页，而 flex-box 的做法恰恰相反，它可以灵活调整项目的大小和内容; 这和使用像素和 em/rem 的区别是一样的，或者像控制你的 div 只使用边距和填充，从不设置预定义的大小。

  • Bootstrap，因为它使用浮点数，需要在每一行后面加上 clearfix，否则会得到不同高度的对齐不正确的 div。Flex-box 不这样做，而是检查容器中最高的 div，并保持其高度不变。

我选择 bootstrap 而非 flex-box 的唯一原因是缺乏浏览器支持(主要是 IE)(已经死了)。有时候，即使 Chrome 和 Safari 使用相同的 webkit 引擎，你也会从它们那里得到不同的行为。

编辑:

顺便说一句，如果你面临的唯一问题是等高栏，有相当多的解决方案:

  • 可以在父节点上使用 display: table，在子节点上使用 display: table-cell;

  • 可以在每个 div 上使用绝对定位:
    位置: 绝对; 上: 0; 底部: 0;

  • 还有 jquery/JS 解决方案，以及另一个我现在想不起来的解决方案，稍后我将尝试添加它。

编辑2:

也检查 http://chriswrightdesign.com/experiments/flexbox-adventures/和 https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties的柔性盒工作原理。

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

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

小开

我还没有使用 Flexbox (我已经阅读了它，似乎是伟大的) ，但我是一个 Bootstrap 前端开发人员。我建议您在做出最终决定之前测试 Flexbox 打印页面。你知道... 有时打印样式是一个可怕的头痛和 Bootstrap 帮助我很多时，我不得不设计打印格式。

小开

恐怕你错过了 另一篇关于 CSS 技巧的文章:

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

这并不意味着，你可以不尝试，但只是想两次。最终，一切都取决于所需的浏览器支持。


提交答案