logo标签列表

使用Flexbox进行页面布局？

htmlcssuser-interface
5
我想了解一下是否应该开始使用flexbox来进行网站/ Web应用程序布局设计，而不是使用浮动div等等。
但我得到了混合的信息。在某个网站上，他们说flexbox现在是页面布局的“圣杯”： http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ 然而，创建css3 flex规范的Tab Atkins却有一个页面称为“为什么flexbox不适合页面布局”： http://www.xanthir.com/blog/b4580 我看了一个视频: http://vimeo.com/98746172 因此，我的结论是，他的意思是它不应该用于复杂的页面布局。而display:grid更适合。但是，grid可能需要几年时间才能达到所有流行的浏览器。
所以，我的问题是，就目前而言，与当前的解决方案（div浮动，display:table-cell，inline-blocks等）相比，flexbox是否更好地创建页面布局，并且是flexbox应该在grid推出之前使用的？
P.S. 我知道flexbox与旧版浏览器不兼容。但是在这个问题上，让我们假设它不是问题。
这取决于您想要的布局，但一般来说，我认为使用flexbox进行布局没有问题。 - rdoyle720
display: flex 只是工具箱中的另一个工具，主要用于组织一排相似的元素。在适当的情况下使用它，但通常不要考虑用它来进行整个页面布局。正如你所说，这就是网格的用途。 - ralph.m
那些网格看起来很酷，但似乎只有IE10+支持 http://caniuse.com/#feat=css-grid - mpen
1个回答
2

我认为你误解了Philip在“Flexbox解决方案”中的观点。他并没有说flexbox是布局的终极解决方案，而是把布局本身叫做终极解决方案。

Tab提出了一些有价值的观点，但这并不意味着flexbox不是目前某些布局中最佳的解决方案。

简单性

使用flexbox能否使你的HTML或CSS更简洁、易于理解和维护？使用flexbox可以避免像移除inline-block元素上的空白符或常常需要额外标记的display：table等hack技术。

性能

与浮动或inline-block元素相比，flexbox元素的渲染速度略慢。然而，除非您在页面上有数百个flexbox，否则这是优化页面速度时需考虑的最后一件事情。有时使用flexbox可以大幅减少CSS的数量。

灵活性

Flexbox非常灵活（不是故意用双关语）。您可以重新排列元素顺序，这可能是其他方法非常困难或不可能完成的。

当进行像两列布局这样的简单任务时，我仍然会使用float。话虽如此，如果您需要flexbox为您的布局提供的功能或它简化了您的HTML或CSS，则请使用它！网格布局在长期内可能更适合，但尚未在大多数浏览器中实现。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接