使用display:几乎所有的flex

Question

使用新的柔性显示器是否正确,除了内联之外,没有理由使用其他显示模式？而且,花车现在似乎也没用.我是否正确,或者有些东西是flex不能做的而其他人可以吗？

以这个典型的网页为例:

所有红色描边框都可以是弹性容器(不仅仅是弹性物品).一些垂直定向,一些水平定向.一些具有柔性增长和柔性收缩的柔性物品,一些没有.

我相信我错过了一些.因此,考虑到flex可以处理所有这些+它具有一些优点(顺序和灵活的尺寸),是否有任何理由使用浮动和其他旧技术？

Answer 1

Flexbox可以改进现有的布局.Float仍然是它做它所做的唯一选择,没有flexbox替代它.您可以将flexbox视为"改进的表格".它与它们共享许多概念(但它不是一个完整的替代方案)

display:flex甚至不能取代block,因为a 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元素,用于粗体和其他文本级样式

希望这可以帮助