Question

以下版本适用于Chrome和FF

<div style="display:flex; flex-direction:column;">
    <div style="flex:1">
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
    </div>
    <div>Bottom</div>
</div>

然而，在IE 11中，底部DIV与顶部DIV重叠。有什么方法可以解决这个问题吗？

JS小提琴：http://jsfiddle.net/fwfA6/

谢谢，阿伦

Answer 1

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

这是flex-grow，flex-shrink和flex-basis合并的简写。第二个和第三个参数（flex-shrink和flex-basis）是可选的。

默认值为0 1 auto。

因此，将样式更改为（默认为示例，您也可以检查其他值）

flex:0 1 auto

像

<div style="display:flex; flex-direction:column; min-height:100%">
    <div style="flex:0 1 auto">
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
    </div>
    <div style="flex:0 1 auto">Bottom</div>
</div>

<强> Demo

从我的问题Why is there a difference between css property flex: 0 1 1 and flex: 0px 1 1

我引用了Boltclock的回答

flex简写中唯一接受长度值的组件是flex-basis。

在声明flex: 0px 1 1中，您明确指定了一个长度值：0px。这将始终分配给flex-basis。该声明等同于：

flex-basis: 0px;
flex-grow: 1;
flex-shrink: 1;

另一方面，声明flex: 0 1 1含糊不清，因为0是flex-grow的可能值。可能会将前两个值分配给flex-grow和flex-shrink，如下所示：

flex-grow: 0;
flex-shrink: 1;

但是这使得最后1值无单位，这是无效的CSS。

现在，您可能会问为什么解析器无法确定0是三个中唯一可以解析为长度并且相应行为的值。那是因为规范声明（在该部分的最后）：

必须将尚未包含两个弹性因子的无单位零解释为弹性因子。为了避免误解或无效声明，作者必须指定零＆lt;'flex-basis'＆gt;具有单位的组件或在其前面有两个弹性因子。

这也解决了早先的歧义。

另请阅读下面的问题评论，Boltclock报告了Chrome https://code.google.com/p/chromium/issues/detail?id=380984

的错误

IE 11未正确对齐Flexbox

1 个答案: