Html Flexbox 与 Twitter Bootstrap（或类似框架）

Flexbox vs Twitter Bootstrap (or similar framework)

提问by Rvervuurt

I have recently discovered Flexboxwhen I was looking for a solution to make divs the same hight, depending on the highest one.

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

I have read the following pageon CSS-tricks.com and it convinced me that flexboxis 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.

我在 CSS-tricks.com 上阅读了以下页面，它使我确信这flexbox是一个非常强大的模块，可以学习和使用。然而，这也让我想到 Twitter 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 做不到的，而用像 Bootstrap 这样的框架可以做的（当然纯粹是在谈论网格系统）？在网站上实施时哪个更快？

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 flexboxcan add?

我猜当仅用于网格系统时，纯粹使用更聪明flexbox，但是如果您已经在使用框架flexbox怎么办，是否可以添加一些东西？

Are there any reasons to choose flexbox's "grid system" over a framework's?

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

回答by ctf0

For a couple of reasons, flexbox is much better than bootstrap:

出于以下几个原因，flexbox 比 bootstrap 好得多：

• 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, 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 通过对项目的大小和内容保持灵活性来做相反的事情；与使用像素与 em/rem 的区别相同，或者仅使用边距和填充来控制您的 div，而从不设置预定义的大小。

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

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.

我会使用 bootstrap 而不是 flex-box 的唯一原因是缺乏浏览器支持（主要是 IE）（已经死了）。有时，即使 Chrome 和 Safari 使用相同的 webkit 引擎，您也会得到与 Chrome 和 Safari 不同的行为。

Edit:

编辑：

BTW if the only problem you are facing is the equal height columns, there are quite a few solutions for that:

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

• You can use display: tableon the parent, an display: table-cell;on the child. See How to get same height in display:table-cell

• You can use absolute positioning on each div:
  position: absolute; top: 0; bottom: 0;

• There is also the jquery/JS solution, and another solution I can't remember at the moment that I'll try to add later.

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

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

• 还有jquery/JS的解决方案，还有一个我暂时想不起来的解决方案，稍后尝试添加。

Edit 2:

编辑2：

Also check http://chriswrightdesign.com/experiments/flexbox-adventures/& https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-propertieson how flex-box works.

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

Edit 3:https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

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

Edit 4:https://caniuse.com/#feat=flexbox

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

回答by kurroman

I havent use Flexbox (I have read about it and seems to be great) but I'm a Bootstrap frontend dev. I suggest you test Flexbox printing pages before making a final decision. You know... Sometimes printing styles are a terrible headache and Bootstrap helps me a lot when I have to design print formats.

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

回答by Kout

I am afraid you missed another article on CSS tricks:

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

Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

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

Does not mean, you may not try, but just think twice. And all depends on desired browser support in the end.

并不是说，你可以不去尝试，而是三思而后行。一切都取决于最终所需的浏览器支持。