网页设计：float还是flexbox？

Question

我是前端设计的新手，当我查看有关这方面的信息时，我发现了两种有关定位的技巧： float 和 flexbox 。

我的问题是：我应该使用更多？我也面向移动设计。

Answer 1

正如this great article总结：

<强>浮筒

优点

• 最常用的解决方法;大多数网格框架都遵循这一点。
• 由于浮动的普及，每个人都意识到浮动错误，并且有很好的记录方法可以克服它们。

缺点

• 需要清除。如果您在2-3个媒体查询断点处更改宽度，可能会非常痛苦，因为浮动需要多次清除。
• 没有垂直居中
• 没有平等的高度
• 没有源订单独立

用于：

• 不需要高度和垂直居中的大型布局块

<强> Flexbox的

优点

• 来源订单独立。可能对响应式布局具有巨大价值，并且不需要JS。
• 垂直居中
• 平等高度
• 灵活的盒子可以互换地移动X和Y轴，这样就可以很容易地用一些属性改变它们。
• 盒子的增长和缩小，可以是列或行，适合可用的空间，但是你希望声明这一点。
• 使用flexbox有多种方法可以做同样的事情。

缺点

• 语法最初不直观。你花了头几个小时看着说WOW的演示，然后是WTF。
• 我一直注意到奇怪的跨浏览器不一致[...]
• 深入了解Flexbox需要一段时间。一旦布局变得更复杂，或者你添加了几个div，事情就会变得混乱。我将在一篇文章中详细记录这一点。
• 许多供应商前缀，旧IE和Webkit的语法不同。使用像Autoprefixr这样的东西解决这个问题。或者写一些mixins。或做点什么..
• 不适用于IE9。如果你不必支持IE9，那你就没事了。
• 影响性能的旧语法报告。我不会过分关心这一点，特别是如果你使用JS来做Flexbox现在可以做的事情......

用于

• 如果你不想在IE9上看起来一样，你可以开始使用它进行垂直居中。
• 如果您不需要IE9支持，那么它非常适合与源顺序无关的布局，相同的高度。
• 我强烈建议将其用于个人项目。
• 应用程序布局，需要拉伸和挤压。 Flexbox真的很棒。

所以回顾一下， flexbox 是一种现代化的方式，非常强大但难以学习。由于它是一种新的，还有很多错误，它并不是无缝兼容的。 浮动是旧的方式：它更基本，但易于使用。