当flexbox处于活动状态时，将忽略哪些css规则？ [英] Which css rules are ignored when flexbox is active?

问题描述

我如何配置flexbox有一个很好的后备？说我有这个：

How can I configure flexbox to have a nice fallback? Say I have this:

.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。

What rules am I allowed to add to have a nice fallback for older browsers and that they get completly ignored and don't disturb flexbox.

注意我不要求一个polifill或任何东西，我只是想要的东西，后退到类似的东西。这将是很高兴知道确切的规则，当flexbox是活动时被忽略。显然显示被覆盖，但是，孩子的宽度怎么样？儿童浮游怎么样？位置：绝对？

Notice I don't ask for a polifill or anything, I just want something that fallbacks to something similar. It would be nice to know exactly wich rules get ignored when flexbox is active. Obviously display is overwritten but, what about children's width? What about children's float? what about position: absolute? what about margins?

推荐答案

根据 spec ，

Flex容器不是块容器，所以一些属性，
设计与块布局的假设不适用于flex布局的
上下文。特别是：

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:

• 列 - * 列布局模块 [CSS3COL] 对flex不起作用

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

float 和 clear 对 flex item ，并且不要把它流出。但是， float 媒体资源可以
通过影响 display
属性的计算值。

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

:: first-line 和 :: first-letter 伪元素不适用于 flex容器 ，和 flex容器不
贡献

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.

对于您的特定问题，

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

• Flex item width (assuming horizontal flow):

flex项目的 主尺寸属性 是 width 或 height
属性，以主要维度中的任何一个为准。

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

这将用作弹性基础，如果 flex-basis 是 汽车 ：

This will be used as the flex basis if flex-basis is auto:

在 flex item ， auto 关键字检索主尺寸属性作为所使用的 flex-basis

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

否则会被忽略。

a href =http://www.w3.org/TR/css-flexbox-1/#abspos-items =nofollow>绝对定位的Flex子项

Absolutely-Positioned Flex Children

flex容器不
参与flex布局。但是，它确实参与
重新排序步骤（请参阅 订单

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

相邻 flex项目不折叠。自动边距
在相应尺寸中吸收额外空间，可用于
对齐，并将相邻的柔性项目推开;请参阅与
对齐 auto code> margin 。

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.

flex items 总是
解决它们各自的维度;不像块，他们做
不总是解决它们包含
块的内联维度。

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规则？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！