当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容器不是块容器，因此有些属性   设计时假设块布局不适用于   柔性布局的上下文。特别是：

     

  

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

  

• float和clear对flex item没有任何影响，并且不会将其视为不在流量范围内。但是，float属性可以   通过影响display仍影响盒子生成   财产的计算值。

  

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

  

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

  

针对您的具体问题，

• Flex项目宽度（假设水平流量）：

    

  弹性项目的main size property可以是width或height   财产，以主要维度为准。

  如果flex basis为flex-basis，则会将其用作auto：

    

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

  否则，它将被忽略。

• Absolutely-Positioned Flex Children

    

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

• Flex Item Margins and Paddings

    

  相邻flex items的边距不会崩溃。自动保证金   吸收相应尺寸的额外空间，可用于   对齐并将相邻的柔性物品分开;见Aligning with auto margins。

       

  flex items上的百分比边距和填充总是如此   解决各自的问题;不像块，他们这样做   并不总是解决其包含的内联维度   块。

       

      

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