如何重置flex-item的'display'属性 [英] How to reset 'display' property for flex-item

问题描述

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

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

我尝试过各种定义，例如 display：inherit ， display：initial ，但没有人能够将显示定义重置为flex-item。

 <！ -  HTML用户列表 - > 
< div class =userDetails layout> 
< div class =picture>< img src =...>< / div> 
< div class =details>用户名，电子邮件等。< / div> 
< / div> 
 
 / * CSS表布局* / 
 .layout {display：table; width：100％; } 
 .layout> .picture {display：table-cell;宽度：30％; } 
 .layout> .details {display：table-cell; width：auto; } 
 
 / * CSS Flexbox  - 不支持它的浏览器忽略* / 
 / *只是一个例子 - 应该使用所有版本以实现最佳兼容性* / 
 .layout {显示：flex; } 
 .layout> .picture {display：???; flex：0 1 30％; } 
 .layout> .details {display：???; flex：1 1 auto; } 
  

无论我在 .details



任何想法如何覆盖这个没有使用JS检测浏览器版本并切换样式？

我已经尝试搜索解决方案，但大多数结果只是关于Flexbox的一般文章;只有类似的是这个测试，它根本不解决向后兼容。

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

UPDATE 2：
Safari以前缀定义... 更新JSFiddle演示

display：flex 或显示） ：inline-flex ）会自动生成flex项目。对于flex项目没有 display 属性;而是根据您希望如何布置flex项目的子项而将其设置为某个其他值。如果浏览器识别 display：flex-item ，那么它们可能有一些奇怪的非标准的flexbox实现，因为该值在Flexbox的任何化身

的初始值显示 inline ，因此 display：initial 等效于 display：inline 。请参见此答案。你想做的是将元素重置为任何默认的显示是由浏览器给出的。你需要提前知道这个值; div 元素 display：block 。

，这将覆盖所有浏览器中现有的 table-cell 声明，原因很明显。在这种情况下，如果您需要支持不支持flexbox的浏览器，您可能还是坚持使用表格布局。

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+).

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

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

<!-- 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 .details it does not work as flex-item and does not grow to fill the remaining space.

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

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

UPDATE 1: This is a JSFiddle demo of 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.

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

解决方案

As Danield has mentioned, all children of a flex container (designated by display: flex or display: inline-flex) are automatically made flex items. There is no display property for a flex item; instead, you set it to some other value depending on how you want the children of the flex item to 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).

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

Unfortunately, this will override the existing table-cell declaration 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.

这篇关于如何重置flex-item的'display'属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！