Flexbox vs Twitter Bootstrap（或类似框架）

我最近发现，Flexbox当我在寻找一种解决方案来使divs相同，取决​​于最高的解决方案。

我已经阅读了CSS-tricks.com上的以下页面，它使我确信这flexbox是一个非常强大的学习和使用模块。但是，这也让我想到了Twitter Bootstrap（和类似框架）为其网格系统提供某种相同功能（当然还有很多额外功能）的事实。

现在，问题是：优缺点是flexbox什么？Flexbox不能提供与Bootstrap这样的框架可以做到的某些功能（当然，纯粹是在谈论网格系统）吗？在网站上实施时哪个更快？

我猜想仅用于网格系统会更聪明flexbox，但是如果您已经在使用框架，flexbox可以添加一些内容吗？

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

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

• Bootstrap使用浮动工具来制作网格系统，这在很多人看来并不适合于Web，Flex-box通过对项目的大小和内容保持灵活来做相反的事情。与使用像素vs.em / rem的区别相同，或者仅使用边距和填充来控制div，而从不设置预定义的大小。

• Bootstrap由于使用浮点数，因此每行后都需要clearfix，否则您将获得不同高度的div对齐。Flex-box不会这样做，而是检查容器中最高的div并保持其高度。

我会通过flex-box进行引导的唯一原因是缺乏浏览器支持（主要是IE）（已经死亡）。有时即使您使用相同的Webkit引擎，您的行为也会与Chrome和Safari不同。

编辑：

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

• 您可以display: table在父级display: table-cell;上使用，在子级上使用。请参阅如何在显示中获得相同的高度：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

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

恐怕您错过了另一篇有关CSS技巧的文章：

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

并不意味着您可能不会尝试，但请三思而后行。最终，一切都取决于所需的浏览器支持。