当 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 处于活动状态时，哪些规则会被忽略。显然显示被覆盖了，但是孩子的宽度呢？儿童花车呢？位置如何：绝对？边距呢？

Answer 1

根据spec，

Flex 容器不是块容器，因此某些属性 设计时假设块布局不适用于 flex 布局的上下文。特别是：

• 多列布局模块[CSS3COL] 中的column-* 属性对弹性容器没有影响。

• float 和 clear 对 flex item 没有影响，并且不要将其从流中取出。但是，float 属性可以 仍然通过影响display 来影响框的生成 属性的计算值。

• vertical-align 对弹性项目没有影响。

• ::first-line 和 ::first-letter 伪元素不适用于 flex containers，flex containers 则不适用于 向他们的祖先贡献第一个格式化的行或第一个字母。

对于您的具体问题，

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

  弹性项目的main size property 是width 或height 属性，以主维度中的为准。

  如果flex-basis 是auto，这将用作flex basis：

  当在 flex item 上指定时，auto 关键字检索 main size property 的值作为使用的flex-basis。

  否则会被忽略。

• Absolutely-Positioned Flex Children

  flex container 的绝对定位子代不会 参与弹性布局。但是，它确实参与了 reordering step（见order），这对他们的绘画有影响 顺序。

• Flex Item Margins and Paddings

  相邻flex items 的边距不会折叠。自动边距 吸收相应维度的多余空间，可用于 对齐并将相邻的弹性项目分开；见Aligning with auto margins。

  flex items 上的百分比边距和填充总是 根据各自的维度解决；与积木不同，它们确实 并不总是解决其包含的内联维度 块。

  注意：此行为是 currently disputed，并且可能会在 本规范的未来版本以匹配块的行为。