使用display：几乎所有的flex

Question

使用新的柔性显示器是否真的没有理由使用其他显示模式，除了内联？而且，花车现在似乎也没用。我是否正确，或者有些东西是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>，因为flexbox无法涵盖其所有功能。例如，为了使用flexbox制作网格，您必须指定尺寸（通过宽度/高度/弹性基础），而表格尺寸是隐式计算的（例如，列中单元格的宽度等于列中的较大单元格）;例如，您可以模拟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就可以看到它没有了），你有一个巨大的限制：所有元素必须是兄弟姐妹。
  如果您的元素是兄弟姐妹并且您正在设计自适应布局，则它们要么垂直堆叠（例如，使用320px宽视口），要么水平堆叠（例如，使用1280+ px视口）。没有中间布局的2行2列和4个兄弟姐妹的中间布局......然后你必须去 inception-way 并且用通常的方法复杂化事物而不是浮动元素clear，clearfix或者inline-block或者在一个分辨率中使用表格布局，在另一个分辨率中浮动并在另一个分辨率中弯曲。
• 规范的其他属性仍未实现
• 在您使用绝对/固定定位的少数情况下，您如何使用flex？开头的模态，图像上的文字横幅，下拉列表等
• 另一个用例：p:first-letter { float: left; font-size: 1.5em; }
• 网格布局（IE10 +唯一，叹息）更强大（并且从可访问性的角度打开滥用，因为它很强大）

tl; dr flex对于布局（*）具有明亮的未来（并且在IE9中除了在IE9中存在于Media Query at-rules中）但是它不会做任何其他的布局方式完全没用，只需更换一些或许多用途。

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

Answer 3

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