如何重置flex-item的'display'属性

Question

我正在尝试通过保留旧浏览器(特别是IE8,IE9和Opera 10+)的表格,将基于表格和JS的旧布局转换为具有向后兼容性的新Flexbox.

问题是没有display:flex-item覆盖旧的风格display:table-cell.

我尝试了各种各样的定义display:inherit,display:initial但没有一个能够重置显示定义以正常工作作为flex项.

<!-- HTML user list -->
<div class="userDetails layout">
    <div class="picture"><img src="..."></div>
    <div class="details">username, email, etc.</div>
</div>

/* CSS Table Layout */
.layout { display: table; width: 100%; }
.layout > .picture { display: table-cell; width: 30%; }
.layout > .details { display: table-cell; width: auto; }

/* CSS Flexbox - ignored by browsers that does not support it */
/* just an example - should use all versions for best compatibility */
.layout { display: flex; }
.layout > .picture { display: ???; flex: 0 1 30%; }
.layout > .details { display: ???; flex: 1 1 auto; }

无论我在显示器中设置什么,.details它都不能用作弹性项目,也不会增长以填充剩余空间.

知道如何在不使用JS检测浏览器版本和切换样式的情况下覆盖它吗？

我已经尝试使用谷歌搜索解决方案,但大多数结果只是关于Flexbox的一般文章; 只有类似的是这个测试,它根本无法解决落后的比较.

更新1:这是一个纯粹的Flexbox和Flexbox与表格布局相结合的JSFiddle演示.如果调整结果窗口的大小,则纯布局的缩小程度与组合表和Flexbox的底部缩小的方式不同.注意:在Chrome中,这可以正常工作,在Firefox,IE,Safari等中试用.

更新2:Safari正常使用前缀定义... 更新了JSFiddle演示

Answer 1

正如Danield所提到的,Flex容器的所有子容器(由display: flex或指定display: inline-flex)都是自动生成的柔性物品.display灵活项目没有属性; 相反,您可以将其设置为其他值,具体取决于您希望如何布置Flex项目的子项.如果浏览器正在识别display: flex-item,那么它们可能有一些奇怪的非标准的"flexbox"实现,因为这个值在Flexbox规范的任何版本中从未存在过(我不知道它究竟与它对应的是什么).

初始值display是inline,所以display: initial相当于display: inline.看到这个答案.你要做的是将元素重置display为浏览器给出的默认值.您需要提前知道这个值; 对于div元素来说display: block.

不幸的是,table-cell由于显而易见的原因,这将覆盖所有浏览器中的现有声明.在这种情况下,如果您需要支持不支持flexbox的浏览器,如果它已经适合您,您可以坚持使用表格布局.

Answer 2

没有,display:flex-item因为一旦你设置display:flex了一个容器元素,孩子就会自动弹出项目.

这是一个演示,表明display:table-cell孩子们不会影响孩子们的flex属性功能

编辑:对于Firefox和IE,如果您在规则display:flex之后添加规则,display:table-cell那么子项display:table-cell上的子项不会影响子项上的flex属性的功能

/* flex layout with display:table falllback */

.layout {
  display: table; /* falllback */
  width: 100%; /* falllback */
  display: flex;
}

.layout > .picture {
  display: table-cell; /* falllback */
  width: 30%; /* falllback */
  display:flex; /* to make FF and IE happy */
  flex: 0 1 30%;
  background: tomato;
}

.layout > .details {
  display: table-cell; /* falllback */
  width: auto; /* falllback */
  display:flex; /* to make FF and IE happy */
  flex: 1 1 auto;
  background: aqua;
}

<div class="layout">
  <div class="picture">
    <img src="...">
  </div>
  <div class="details">username, email, etc.</div>
</div>