html - Flexbox vs Twitter Bootstrap(或类似框架)

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

我已阅读 following page在 CSS-tricks.com 上,它让我相信 flexbox 是一个非常强大的学习和使用模块。然而,这也让我想到 Twitter Bootstrap(和类似框架)提供与其网格系统相同的功能(当然还有很多额外功能)。

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

我猜只有在网格系统的情况下,纯粹使用 flexbox 会更聪明,但是如果你已经在使用框架,有什么 flexbox可以加吗?

有什么理由选择 flexbox 的“网格系统”而不是框架的?

最佳答案

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

  • Bootstrap 使用 float 来制作网格系统,许多人会说这不适用于 Web,而 flex-box 则相反,它通过保持元素的大小和内容的灵 active 来实现;与使用像素与 em/rem 的区别相同,或者仅使用边距和填充来控制 div,而从不设置预定义的大小。

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

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

编辑:

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

  • 您可以在父级上使用 display: table,在子级上使用 display: table-cell;。见 How to get same height in display:table-cell

  • 您可以在每个 div 上使用绝对定位:
    position:absolute; 顶部:0; 底部:0;

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

编辑 2:

同时检查 http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties关于 flex-box 的工作原理。

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

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

https://stackoverflow.com/questions/27599396/

相关文章:

javascript - 如何替换 div 元素中的文本?

html - 我可以将 CSS 样式应用于元素名称吗?

css - 如何将 div 与其父级的顶部对齐但保持其内联 block 行为?

html - 如何仅使用 CSS/HTML 隐藏图像损坏的图标?

html - 为什么我的 CSS3 媒体查询在移动设备上不起作用?

html - 如何在 Markdown 表中编写列表?

html - 为什么我的列表项元素符号与 float 元素重叠

javascript - 单选按钮的 OnChange 事件处理程序(输入类型 ="radio")不

html - 您如何确定网站建立在什么技术之上?

html - Force to open "Save As..."popup open at tex