在几乎所有东西上使用 display:flex

Question

是否应该始终使用 flex 来代替浮动或其他显示模式（内联除外）？这是真的吗，或者有什么其他人可以做而 flex 做不到的事情？

示例网页：

所有的红色框都可以是弹性容器（不仅仅是弹性项目）。有些是垂直的，有些是水平的。一些带有 flex-grow 和 flex-shrink 的弹性项目，有些没有。

那么，考虑到 flex 可以处理所有这些并且它具有其他优点（顺序和灵活的尺寸），是否有任何理由使用浮点数和其他旧技术？

Answer 1

Flexbox 用于改进现有布局。 Float 仍然是唯一的选择，它没有 flexbox 替代品。您可以将 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>s，因为 flexbox 无法涵盖它们的所有功能。例如，为了使用 flexbox 制作网格，您必须指定尺寸（通过宽度/高度/flex-basis），而表格尺寸是隐式计算的（例如，列中单元格的宽度等于列中较大的单元格);例如，您可以模拟 colspan 但不能模拟 rowspan) http://jsfiddle.net/xDLvg/

当然你仍然需要display:inline 元素，用于粗体和其他文本级样式

希望对你有帮助

Answer 2

添加到@wesabi 回答谁已经解决了这个问题的许多方面：

• 兼容性为 IE10+
• -flex-wrap 兼容 IE11+ 和 Firefox 28+（以及 Chrome 21+ Safari 6.1+，问题较少）。我的客户依赖它还为时过早。
• 没有-flex-wrap（codepen，只需删除 flex-wrap 看看没有它会是什么样子），你有一个巨大的限制：你所有的元素都必须是 siblings。
  如果您的元素是同级元素并且您正在设计自适应布局，则它们要么垂直堆叠（例如，具有 320 像素宽的视口）或水平堆叠（例如，具有 1280+ 像素的视口）。没有办法实现 2 行 2 列和 4 个兄弟的中间布局...然后您必须采用 inception-way 并使用通常的 clear、clearfix 或else inline-block 或在一种分辨率下使用表格布局，在另一种分辨率下浮动并在另一种分辨率下弯曲。
• 规范的其他属性仍未实现
• 在您使用绝对/固定定位的少数情况下，您是如何使用 flex 的？首先是模态框、图像上的文本横幅、下拉菜单等
• 另一个用例：p:first-letter { float: left; font-size: 1.5em; }
• 网格布局（仅限 IE10+，叹息）更强大（从可访问性的角度来看，它很容易被滥用，因为它很强大）

tl;dr flex 对布局 (*) 有一个光明的未来（并且存在于除 IE9 之外的媒体查询规则中），但它不会使任何其他的布局方式完全无用，只需替换它们的一些或许多用途。

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

Answer 3

你可以在任何东西上使用 flexbox，但你真的不应该。 Flexbox 是一种新的布局算法，用于布局复杂的网页/应用程序，但他也有它的缺点（暂时是最慢的布局）。 基本上 flexbox 最适合较小的页面组件和 UI 元素。新的网格布局更适合整体页面布局。它们一起玩得很好，将来我们会一起使用它们。