首页 文章

Flexbox与Twitter Bootstrap（或类似框架）[已关闭]

提问于
浏览 次
155

我最近发现了 Flexbox ，当时我正在寻找一个解决方案来使div成为同样的高度，具体取决于最高的一个 .

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

现在，问题是： flexbox 的优点和缺点是什么？有没有人可以用Flexbox做的事情，可以用像Bootstrap这样的框架（当然纯粹是在谈论网格系统）？在网站上实施哪一个更快？

我更聪明地纯粹使用 flexbox ，但如果你已经在使用框架，那么 flexbox 可以添加什么？

有没有理由选择 flexbox 's 1819348 over a framework'？

html css twitter-bootstrap flexbox

3 回答

  • 1

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

    • Bootstrap使用浮动来制作网格系统，许多人会说这不适用于网络，其中flex-box通过保持对项目大小和内容的灵活性来做相反的事情;与使用像素与em / rem相同，或者像仅使用边距和填充来控制div而从不设置预定义的大小 .

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

    我在flex-box上使用bootstrap的唯一原因是缺乏浏览器支持（主要是IE）（已经死掉） . 有时你会从Chrome和Safari中获得不同的行为，即使它们都使用相同的webkit引擎 .

    Edit:

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

    • 您可以在父项上使用 display: table ，在子项上使用 display: table-cell; . 见How to get same height in display:table-cell

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

    • 还有jquery / JS解决方案，以及我可以稍后尝试添加的另一个解决方案 .

    Edit 2:

    另请参阅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

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

    回复于
  • 6

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

    回复于
  • 101

    我恐怕你错过了another article on CSS tricks：

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

    不代表，你可能不会尝试，但只是三思而后行 . 一切都取决于最终所需的浏览器支持 .

    回复于

相关问题