如何配置flexBox以获得良好的后备?说我有这个:
.parent{
display: flex;
flex-flow: row wrap;
width: 320px;
border: 1px solid black;
}
.children{
text-align: center;
flex: 1;
background: #DDD;
}
我允许添加哪些规则,以便为旧浏览器提供良好的后备,并且它们会被完全忽略并且不会干扰flexBox.
请注意,我不会要求一个polifill或任何东西,我只是想要一些类似的东西.当flexBox处于活动状态时,确切地知道哪些规则被忽略会很高兴.显然会覆盖显示,但是孩子的宽度怎么样?孩子的漂浮怎么样?位置怎么样:绝对?利润率怎么样?
最佳答案
根据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 07001 have no effect on a flex container.
-
07002 and 07003 have no effect on a 07004,and do not take it out-of-flow. However,the 07002 property can
still affect Box generation by influencing the 07006
property’s computed value.
-
07007 has no effect on a flex item.
-
the 07008 and ::first-letter
pseudo-elements do not apply to 07009,and 07009 do not
contribute a first formatted line or first letter to their ancestors.
针对您的具体问题,
> Flex项目宽度(假设水平流量):
The flex item’s 070011 is either the 070012 or 070013
property,whichever is in the main dimension.
如果flex-basis
是auto
,这将用作flex basis:
When specified on a 07004,the auto
keyword retrieves the
value of the 070018 as the used 070015.
否则,它将被忽略.
> Absolutely-Positioned Flex Children
An absolutely-positioned child of a 070021 does not
participate in flex layout. However,it does participate in the
070022 (see 070023),which has an effect in their painting
order.
> Flex Item Margins and Paddings
The margins of adjacent 070025 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 070026.
Percentage margins and paddings on 070025 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 070028,and might change in a
future version of this specification to match the behavior of blocks.
原文链接:https://www.f2er.com/css/427214.html