Rve*_*urt 160 html css flexbox twitter-bootstrap
我最近发现Flexbox当我在寻找一个解决方案来使div成为同样的高度时,取决于最高的一个.
我在CSS-tricks.com上阅读了以下页面,它让我相信这flexbox是一个非常强大的学习和使用模块.然而,它也让我想到Twitter Bootstrap(和类似的框架)与他们的网格系统提供相同的功能(当然还有很多额外的功能).
现在,问题是:有哪些优点和缺点flexbox？有没有人可以用Flexbox做的事情,可以用像Bootstrap这样的框架(当然纯粹是在谈论网格系统)？在网站上实施哪一个更快？
我猜测什么时候只用于网格系统,纯粹使用它更聪明flexbox,但如果你已经在使用框架,那么有什么东西flexbox可以添加吗？
有没有理由flexbox在框架上选择"网格系统"？
ctf*_*tf0 105
出于几个原因,flexbox比bootstrap要好得多:
Bootstrap使用浮动来制作网格系统,许多人会说这不适用于网络,其中flex-box通过保持灵活的项目大小和内容来做相反的事情; 与使用像素与em/rem相同,或者像仅使用边距和填充来控制div而从不设置预定义的大小.
Bootstrap,因为它使用浮点数,每行后需要clearfix,否则你会得到不同高度的错位div.Flex-box不会这样做,而是检查容器中最高的div并坚持其高度.
我在flex-box上使用bootstrap的唯一原因是缺乏浏览器支持(主要是IE)(已经死掉).有时你会从Chrome和Safari中获得不同的行为,即使它们都使用相同的webkit引擎.
编辑:
顺便说一句,如果您面临的唯一问题是高度相等的列,那么有很多解决方案:
您可以display: table在父母身上使用display: table-cell;,在孩子身上使用.请参见如何在显示中获得相同的高度:table-cell
您可以在每个div上使用绝对定位:
position: absolute;
top: 0;
bottom: 0;
编辑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对我有很大的帮助.