0

Flex-box 仕様3 では、flex-items はブロック コンテナーではないと規定されています。

フレックス アイテムは、そのコンテンツの新しい書式設定コンテキストを確立します。この整形コンテキストのタイプは、通常どおり、その「表示」値によって決定されます。フレックスアイテムの計算された「表示」は、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 の高さは、そのコンテナ #flexAuto のサイズと同様に 200 ピクセルになると思います。ただし、高さは 0px です。実際の出力は左の図のようになります。私は正しい写真を期待します：

実際期待される

フレックスアイテムを再びボックスのように動作させる簡単な方法はありますか?

4

1 に答える 1

0

ええと、表示モードをブロックに変更するまで、外側のフレックスボックスの子は通常フレックスアイテムだと思います。

したがって、FlexAuto の高さを明示的に指定する必要があります ( height:100%)。高さは、Flexbox コンテナーに対して相対的に計算されます。

そして、最も内側の要素が意図したとおりに表示されます。

(ちなみに、flexAuto がまだ flex アイテムだったとしても、おそらく flex:"stretch" を設定する必要があったかもしれません。)

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

于 2013-09-15T15:37:31.570 に答える