0

Flex-box 规范3声明 flex-item 不是块容器：

弹性项目为其内容建立一个新的格式化上下文。像往常一样，此格式化上下文的类型由其“显示”值确定。弹性项目的计算“显示”是通过应用 CSS 2.1 第 9.7 章中的表格确定的。然而，弹性项目是弹性级盒子，而不是块级盒子：它们参与容器的弹性格式化上下文，而不是块格式化上下文。

看看这个小例子（小提琴：4）：

#flex {
    height: 200px;
    width: 100px;
    display: flex;
    flex-flow: column;
    background-color: red;
}
#flexAuto {
    display: block;
    position: relative;
    flex: auto;
    width: 100%;
}
#oneHundredPercent {
    height: 100%;
    width: 100%;
    background-color: green;
}

HTML

<div id="flex">
    <div id="flexAuto">
        <div id="oneHundredPercent"></div>
    </div>
</div>

我希望#oneHundredPercent 高 200 像素，就像它的容器 #flexAuto 的大小一样。但它的高度为 0px。实际输出看起来像左图。我期待正确的图片：

实际的预期的

有没有一种简单的方法可以让弹性项目再次表现得像一个盒子？

4

1 回答 1

0

好吧，我猜外部 flex 框的子项通常是一个 flex 项，直到您将它的显示模式更改为阻止。

因此，您只需要明确声明 FlexAuto 的高度 ( height:100%)。高度将相对于 Flexbox 容器计算。

然后最里面的元素将按您的意图显示。

（顺便说一下，即使 flexAuto 仍然是一个 flex 项，您可能还需要设置 flex:"stretch"。）

http://jsfiddle.net/dfrWd/6/

于 2013-09-15T15:37:31.570 回答