Flexbox 与 Twitter Bootstrap(或类似框架) [英] Flexbox vs Twitter Bootstrap (or similar framework)
问题描述
我最近发现了 Flexbox，当时我正在寻找一种解决方案，使 div 具有相同的高度，具体取决于最高的高度.
I have recently discovered Flexbox when I was looking for a solution to make divs the same hight, depending on the highest one.
我已经阅读了 CSS-tricks.com 上的以下页面让我确信 flexbox 是一个非常强大的学习和使用模块.然而，这也让我想到了一个事实，即 Twitter Bootstrap(和类似框架)提供了与其网格系统相同的功能(当然还有很多额外的功能).
I have read the following page on CSS-tricks.com and it convinced me that flexbox is a very powerful module to learn and use. However, it also made me think about the fact that Twitter Bootstrap (and similar frameworks) offer kind of the same functions (+ of course a lot extra) with their grid systems.
现在，问题是:flexbox 的优缺点是什么?有什么是用 Flexbox 做不到的，而用像 Bootstrap 这样的框架可以做的(当然纯粹是在谈论网格系统)?在网站上实施时哪个更快?
Now, the questions are: What are the pros and cons of flexbox? Is there something one can't do with Flexbox that one can do with a framework like Bootstrap (of course purely talking about the grid system)? Which one is faster when implemented on a website?
我猜当仅用于网格系统时，纯粹使用 flexbox 会更聪明，但是如果您已经在使用框架，那么有什么 flexbox可以加吗?
I'm guessing when only for the grid system, it's smarter to purely use flexbox, but what if you're already using a framework, is there something flexbox can add?
是否有任何理由选择 flexbox 的网格系统"而不是框架的网格系统"?
Are there any reasons to choose flexbox's "grid system" over a framework's?
推荐答案
出于几个原因，flexbox 比 bootstrap 好得多:
For a couple of reasons, flexbox is much better than bootstrap:
Bootstrap 使用浮动来制作网格系统，许多人会说这不适用于网络，而 flex-box 则相反，通过对项目的大小和内容保持灵活性；与使用像素与使用 em/rem 的区别相同，或者仅使用边距和填充来控制 div，而从不设置预定义的大小.
Bootstrap uses floats to make the grid system, which many would say is not meant for the web, where flex-box does the opposite by staying flexible to the items' size and contents; same difference as using pixels vs em/rem, or like controlling your divs only using margins and padding and never setting a pre-defined size.
Bootstrap，因为它使用浮点数，每行后都需要clearfix，否则你会得到不同高度的未对齐的div.Flex-box 不会这样做，而是检查容器中最高的 div 并坚持其高度.
Bootstrap, because it uses floats, needs clearfix after each row, or you will get misaligned divs of different height. Flex-box doesn't do that and instead checks for the tallest div in the container and sticks to its height.
我会使用 bootstrap 而不是 flex-box 的唯一原因是缺乏浏览器支持(主要是 IE)(已经死了).有时即使 Chrome 和 Safari 使用相同的 webkit 引擎，您也会得到不同的行为.
The only reason I would go with bootstrap over flex-box is lack of browser support (IE mainly) (die already). And sometimes you get different behavior from Chrome and Safari even though both use the same webkit engine.
顺便说一句，如果您面临的唯一问题是等高的列，那么有很多解决方案:
BTW if the only problem you are facing is the equal height columns, there are quite a few solutions for that:
您可以在父项上使用
display: table，在子项上使用display: table-cell;.请参阅如何在显示中获得相同的高度:table-cell
You can use
display: tableon the parent, andisplay: table-cell;on the child. See How to get same height in display:table-cell
您可以在每个 div 上使用绝对定位:位置:绝对；顶部:0；底部:0；
You can use absolute positioning on each 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 关于 flex-box 的工作原理.
Also check http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties on how flex-box works.
编辑 3:https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox
编辑 4:https://caniuse.com/#feat=flexbox
这篇关于Flexbox 与 Twitter Bootstrap(或类似框架)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
