Web 网页设计：float还是flexbox？

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

我的问题是：我应该更多地使用什么？我也以手机设计为导向。

总结如下：

---

浮动

优势

• 最流行的布局方式；大多数网格框架都遵循这一点
• 由于浮点运算的流行，每个人都知道浮点运算的错误，并且有很多文档记录的方法来克服它们

缺点

• 需要清理。如果在2-3个媒体查询断点处更改宽度，可能会非常痛苦，因为浮动需要清除那么多次
• 无垂直定心
• 没有同等的高度
• 无源顺序独立性

用于：

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

---

Flexbox

优势

• 源顺序独立性。对于响应性布局可能具有巨大的价值，因此无需使用JS
• 垂直定心
• 等高
• Flex Box可以在X轴和Y轴上互换移动，非常方便，您可以通过几个属性真正改变周围的事物
• 框可以增长和收缩，可以是列或行，适合可用空间，但您希望声明这一点
• 有多种方法可以使用flexbox执行相同的操作

缺点

• 语法最初是不直观的。你在开始的几个小时里看演示，然后看WTF
• 我注意到奇怪的跨浏览器不一致[…]
• 深入理解Flexbox需要一段时间。一旦布局变得更复杂，或者添加了几个div，事情就会变得混乱。我将在一篇文章中进一步记录这一点
• 很多厂商的前缀，对于旧的IE和Webkit有不同的语法。使用类似Autoprefixr的方法解决此问题。或者写一些混音。或者做点什么
• 在IE9上不起作用。如果你不需要支持IE9，你就可以了
• 旧语法影响性能的报告。老实说，我不会太在意这个，尤其是如果你使用JS来做Flexbox现在可以做的事情

用于

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

---

因此，回顾一下，flexbox是一种现代的方式，非常强大，但更难学习。由于它是一种新的，也有很多错误，它似乎不兼容浮动是旧方法：它更基本，但易于使用