使用显示:对几乎所有东西都使用flex。

Question

是否应始终使用flex代替浮标或其他显示模式(内联除外)？这是真的吗，还是有其他人能做得到的事？

示例网页：

​

​

所有的红色抚摸盒都可以是弹性容器(不仅仅是挠性物品)。有些是垂直的，有些是水平的。一些有弹性生长和弯曲收缩的项目，有些没有。

因此，考虑到flex可以处理所有这些问题，并且它具有其他优势(顺序和灵活的维度)，是否有理由使用浮标和其他老技术？

Answer 1

Flexbox来改进现有的布局。浮动仍然是唯一的选择来做它所做的，没有柔性盒替代它。您可以将柔性盒看作是“改进的表”。它与它们有许多相同的概念(但它不是一个完整的替代方案)

display:flex甚至不能取代block，因为display:flex实际上是一个block本身；flex影响到它的子代，而不是它自己布局的方式。

与display:inline-block元素相同。它的布局类似于inline元素，但其内容的布局与display:block元素中的内容相同。

除了文本块(如段落和标题)或任何其他文本字符串，几乎所有东西都可以使用display:flex。它们应该包含在块元素中，否则浏览器将为您完成此任务：http://jsfiddle.net/56fHY/

从这个例子中还可以看到，即使<b>是display:inline，因为它的容器是display:flex，所以它必须是display:block。

正如我已经说过的，你还需要float:

您还可能需要inline-flex：典型的用例是诸如小部件之类的元素，它们在放置在display:block段落中时和在display:flex容器中使用时都应该工作。

您还需要display:table或<table>，因为flexbox不能涵盖它们的所有特性。例如，为了使用柔性盒生成网格，您必须指定尺寸(通过宽度/高度/弯曲基)，而对于表，则隐式计算维度(例如，列中单元格的宽度等于列中较大的单元格)；例如，您可以模拟colspan，但不能模拟rowspan) http://jsfiddle.net/xDLvg/。

当然，对于粗体和其他文本级别的样式，仍然需要display:inline元素。

希望这能帮上忙

Answer 2

在@wesabi的回答中，他已经解决了这个问题的许多方面：

• 兼容性是IE10+
• -flex-wrap与IE11+和火狐28+兼容(以及Chrome 21+ Safari 6.1+，问题较少)。对我的客户来说太早了。
• 如果没有-flex-wrap (码页，只需删除弹性包装以查看没有它是什么情况)，您就有了一个巨大的限制:您的所有元素都必须是兄弟姐妹。 如果您的元素是兄弟元素，并且您正在设计一个自适应布局，则它们要么垂直堆叠(例如，有320 px宽的视口)，要么横向地(例如，使用1280+ px视图端口)。没有一个中间布局的2行2列和4个兄弟姐妹.然后，您必须按照开始的方式做复杂的事情，而不是使用通常清晰、清晰的inline-block或其他的浮动元素，或者在一种分辨率中使用表布局，在另一种分辨率中浮动，在另一种分辨率中灵活使用。
• 规范的其他属性仍未实现。
• 在使用绝对/固定定位的少数情况下，您是如何使用flex的？开始使用的情态，图像上文字的横幅，下拉式等。
• 另一个用例：p:first-letter { float: left; font-size: 1.5em; }
• 网格布局(仅限于IE10+，叹息)要强大得多(从可访问性的角度来看，它是开放的，因为它是强大的)

tl；flex博士在布局(*)方面有一个光明的未来(除了IE9之外，它还存在于媒体查询的规则中)，但是它不会使任何其他的布局方式完全无用，只需替换它们的一些或多个用途。

(*)在后IE8 +世界中，假设IE9将在IE8之前消失，因为XP将IE限制为IE8，但Vista/7/8上的IE可以升级到IE8和IE9之外。

Answer 3

flexbox是一种新的布局算法，用于布局复杂的网页/应用程序，但他也不喜欢它(暂时是最慢的布局)。基本上，对较小的页面组件和UI元素来说，flexbox是最好的。新的网格布局更适合于整体页面布局。他们在一起玩得很好，将来我们会一起使用他们。