html - 如何制作 flex 元素 block 元素？

Question

Flex-box 规范 3声明 flex 元素不是 block 容器:

A flex item establishes a new formatting context for its contents. The type of this formatting context is determined by its ‘display’ value, as usual. The computed ‘display’ of a flex item is determined by applying the table in CSS 2.1 Chapter 9.7. However, flex items are flex-level boxes, not block-level boxes: they participate in their container's flex formatting context, not in a block formatting context.

看看这个小例子( fiddle :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。实际输出如左图所示。我希望得到正确的图片:

有没有一种简单的方法可以使 flex 元素再次表现得像一个盒子？

Answer 1

好吧，我想在您将其显示模式更改为 block 之前，外部 flex 盒的子项通常是 flex 元素。

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

然后最里面的元素将按您的预期显示。

(顺便说一下，即使 flexAuto 仍然是一个 flex 元素，您可能还需要设置 flex:"stretch"。)

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