Flexbox与Twitter Bootstrap(或类似的框架)

我最近发现Flexbox时,我正在寻找一个解决scheme,使Flexbox相同,取决​​于最高的一个。

我已阅读CSS-tricks.com上的以下页面 ,并确信flexbox是一个非常强大的模块,可供学习和使用。 但是,这也让我想到了Twitter Bootstrap(以及类似的框架)在网格系统中提供了相同的function(当然还有很多额外的function)。

现在的问题是: flexbox有什么优点和缺点? 有什么人不能用Flexbox做什么,可以用像Bootstrap这样的框架来做(当然纯粹是谈论网格系统)? 在网站上实施哪个更快?

我猜只是为了网格系统,纯粹使用flexbox更聪明,但是如果你已经使用了框架, flexbox可以添加?

在框架上selectflexbox的“网格系统”是否有任何理由?

出于几个原因,flexbox比bootstrap好得多:

  • 引导程序使用浮动来制作网格系统,很多人会说networking系统并不适用于networking,而柔性盒则通过保持对项目的大小和内容的灵活性而相反。 与使用像素vs em / rem相同的区别,或者像使用边距和填充来控制div一样,从不设置预先定义的大小。

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

唯一的原因,我会用自举超过弹性盒是缺乏浏览器支持(主要是IE)(已死)。 有时,即使两者使用相同的Webkit引擎,Chrome和Safari也会有不同的行为。

编辑:

顺便说一句,如果你面临的唯一问题是高度相等的列,有相当多的解决scheme:

  • 您可以在父级使用display: table display: table-cell; 对孩子。 请参阅如何在显示中获得相同的高度:表格单元格

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

  • 还有jquery / JS解决scheme,另一个解决scheme,我不记得在这个时候我会尝试添加。

编辑:

另请参阅http://chriswrightdesign.com/experiments/flexbox-adventures/&https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties了解flex-box的工作原理。;

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

我没有使用Flexbox(我已经阅读了它,似乎是伟大的),但我是一个Bootstrap前端开发。 build议您在做出最终决定之前testingFlexbox打印页面。 你知道…有时印刷风格是一个可怕的头痛,Bootstrap帮助我很多,当我必须devise印刷格式。

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

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

不代表,你可能不会尝试,只是三思而后行。 而最终都取决于所需的浏览器支持。