Flexbox vs Twitter Bootstrap（或类似框架） [英] Flexbox vs Twitter Bootstrap (or similar framework)

问题描述

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

我已阅读过关于CSS技巧的后续页面。 com，它说服了 flexbox 是一个非常强大的模块来学习和使用。然而，它也让我想到了一个事实，Twitter Bootstrap（和类似的框架）提供了相同的功能（当然是额外的+）与他们的网格系统。

现在，问题是： flexbox 的利弊是什么？有没有什么不能做的Flexbox，可以做一个框架如Bootstrap（当然纯粹谈论网格系统）？

我猜想当只有网格系统时，它更聪明，纯粹使用 flexbox ，但是如果你已经在使用一个框架了，是否有 flexbox 可以添加？

有什么理由在框架的< - p>

解决方案上选择 flexbox

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

• Bootstrap使用浮动网格系统，许多人会说不是为web，其中flex-box做的相反，保持灵活的项目的大小和内容;




• Bootstrap，因为它是使用像素与em / rem的差异，或者像使用边距和填充控制您的div一样，从不设置预定义的大小。它使用浮动，每行后需要clearfix，否则你会得到不同高度的divs对齐。

我唯一的原因，我会使用bootstrap over flex-box是缺乏浏览器支持（IE主要）（die已经）。有时候，即使两者都使用相同的webkit引擎，Chrome和Safari也会出现不同的行为。

编辑：

如果你面对的唯一问题是等高列，有很多解决方案：

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




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




• 还有jquery / JS解决方案，以及另一个我不记得的解决方案，


p>另请检查 http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-
编辑2：
https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox



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

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.

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?

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?

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

解决方案

For a couple of reasons, flexbox is much better than 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.

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.

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: table on 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.

Edit:

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

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

这篇关于Flexbox vs Twitter Bootstrap（或类似框架）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！