Question

我试图通过保留旧浏览器（特别是IE8，IE9和Opera 10 +）的表格，将基于表格和JS的旧布局转换为具有向后兼容性的新Flexbox。

问题是没有display:flex-item来覆盖display:table-cell的旧样式。

我尝试了各种定义，例如display:inherit，display:initial，但没有人能够将显示定义重置为灵活项目。

<!-- 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显示什么设置，它都不能用作flex项目，也不会增长来填充剩余的空间。

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

我尝试使用谷歌搜索解决方案，但大多数结果只是关于Flexbox的一般文章;唯一相似的是this test，这根本无法解决落后的比较。

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

更新2： Safari可以正确使用前缀定义... updated JSFiddle demo

Answer 1

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

以下是 a demo ，表明子项上的display:table-cell不会影响子项的flex属性功能

修改：对于Firefox和IE，如果您在display:flex规则之后添加规则display:table-cell，则子项上的display:table-cell不会影响儿童的弹性属性

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 2

正如Danield所提到的，Flex容器的所有子项（由display: flex或display: inline-flex指定）都会自动生成弹性项目。 Flex项目没有display属性;相反，您可以将其设置为其他值，具体取决于您希望如何布置Flex项目的子项。如果浏览器识别display: flex-item，那么它们可能有一些奇怪的非标准的“flexbox”实现，因为该值在Flexbox规范的任何版本中都不存在（我不知道究竟它对应于什么）如果确实如此）。

display的初始值为inline，因此display: initial相当于display: inline。见this answer。您要做的是将元素重置为浏览器提供的默认display。您需要提前知道这个值;对于div元素，它是display: block。

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

Answer 3

.child {
  flex-shrink: 0;
}

添加flex-shrink属性以防止收缩超过其内容

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

3 个答案: