CSS 如何重置弹性项目的“显示”属性

How to reset 'display' property for flex-item

提问by Radek Pech

I'm trying to convert old layout based on tables and JS to the new Flexbox with backward compatibility by keeping the tables for old browsers (specifically IE8, IE9 and Opera 10+).

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

The problem is that there is no display:flex-itemto override the old style of display:table-cell.

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

I've tried various definitions like display:inherit, display:initialbut none is able to reset the display definition to work correctly as flex-item.

我尝试了各种定义，例如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; }

Whatever I set in display for the .detailsit does not work as flex-item and does not growto fill the remaining space.

无论我在 display 中设置什么，.details它都不能作为 flex-item 工作，也不会增长以填充剩余空间。

Any idea how to override this without using JS to detect browser version and switch the styles?

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

I've tried googling for solution but most of the results are just general articles about Flexbox; only similar is this testwhich simply does not solve the backward compatility.

我试过谷歌搜索解决方案，但大多数结果只是关于 Flexbox 的一般文章；唯一相似的是这个测试根本没有解决向后兼容性。

UPDATE 1: This is a JSFiddle demoof a pure Flexbox and Flexbox combined with table layout. If you resize the result window, the pure layout shrinks differently than the bottom one that combine table and Flexbox. Note: in Chrome this works correctly, try it in Firefox, IE, Safari, etc.

更新 1：这是一个纯 Flexbox 和 Flexbox 结合表格布局的JSFiddle 演示。如果调整结果窗口的大小，纯布局的收缩方式与底部结合了表格和 Flexbox 的布局不同。注意：在 Chrome 中这可以正常工作，请在 Firefox、IE、Safari 等中尝试。

UPDATE 2: Safari works correctly with prefixed definitions... updated JSFiddle demo

更新 2：Safari 使用前缀定义正常工作......更新的 JSFiddle 演示

采纳答案by BoltClock

As Danield has mentioned, all children of a flex container (designated by display: flexor display: inline-flex) are automatically made flex items. There is no displayproperty for a flex item; instead, you set it to some other value depending on how you want the children of the flex itemto be laid out. If browsers are recognizing display: flex-item, then they probably have some weird non-standard implementation of "flexbox", because that value has never existed in any incarnation of the Flexbox spec (and I have no idea what exactly it would correspond to if it did).

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

The initial value of displayis inline, so display: initialis equivalent to display: inline. See this answer. What you're trying to do is reset the elements to whatever their default displayis as given by browsers. You will need to know this value in advance; for divelements it's display: block.

的初值display为inline，所以display: initial等价于display: inline。看到这个答案。您要做的是将元素重置display为浏览器给出的默认值。您需要提前知道这个值；对于div元素，它是display: block.

Unfortunately, this will override the existing table-celldeclaration in all browsers, for obvious reasons. In that case, you might as well just stick with the table layout if it already works for you, if you need to support browsers that don't support flexbox.

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

回答by Danield

There is no display:flex-itembecause once you set display:flexon a container element, the children are automatically flex items.

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

Here is a demoto show that the display:table-cellon the children does not effect the functionality of the flex properties on the children

这是一个演示，display:table-cell用于说明子项上的 flex 属性不会影响子项上的 flex 属性的功能

Edit:For Firefox and IE if you add the rule display:flexafter the display:table-cellrule then the display:table-cellon the children does not effect the functionality of the flex properties on the children

编辑：对于 Firefox 和 IE，如果您在规则display:flex之后添加规则，display:table-cell则display:table-cell子项上的 flex 属性不会影响子项上的 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>

回答by Anees

.child {
  flex-shrink: 0;
}

add flex-shrink property to prevent shrinking more than its content

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