当 flexbox 处于活动状态时，哪些 css 规则被忽略？

Question

如何配置 flexbox 以获得良好的回退？假设我有这个：

.parent{
 display: flex;
 flex-flow: row wrap;
 width: 320px;
 border: 1px solid black;
}
.children{
 text-align: center;
 flex: 1;
 background: #DDD;
}

<div class="parent">
 <div class="children">1</div>
 <div class="children">2</div>
 <div class="children">3</div>
</div>

我可以添加哪些规则来为旧版浏览器提供良好的回退，并且它们会被完全忽略并且不会干扰 flexbox。

请注意，我不要求 polifill 或任何东西，我只想要一些可以回退到类似东西的东西。很高兴知道当 flexbox 处于活动状态时确切地忽略了哪些规则。显然 display 被覆盖了，但是 children 的宽度呢？儿童花车呢？ position: absolute 呢？边距呢？

Answer 1

根据 spec,

Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular:

the column-* properties in the Multi-column Layout module [CSS3COL] have no effect on a flex container.

float and clear have no effect on a flex item, and do not take it out-of-flow. However, the float property can still affect box generation by influencing the display property’s computed value.

vertical-align has no effect on a flex item.

the ::first-line and ::first-letter pseudo-elements do not apply to flex containers, and flex containers do not contribute a first formatted line or first letter to their ancestors.

对于您的具体问题，

弹性项目宽度（假设水平流动）：

The flex item’s main size property is either the width or height property, whichever is in the main dimension.

这将用作 flex basis if flex-basis is auto:

When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis.

否则忽略
Absolutely-Positioned Flex Children

An absolutely-positioned child of a flex container does not participate in flex layout. However, it does participate in the reordering step (see order), which has an effect in their painting order.
Flex Item Margins and Paddings

The margins of adjacent flex items do not collapse. Auto margins absorb extra space in the corresponding dimension and can be used for alignment and to push adjacent flex items apart; see Aligning with auto margins.

Percentage margins and paddings on flex items are always resolved against their respective dimensions; unlike blocks, they do not always resolve against the inline dimension of their containing block.

Note: This behavior is currently disputed, and might change in a future version of this specification to match the behavior of blocks.

当 flexbox 处于活动状态时，哪些 css 规则被忽略？

Which css rules are ignored when flexbox is active?

css

flexbox