flex-itemの `display`プロパティの値はどれくらいですか？

Question

フレックスコンテナ（display: flexまたはdisplay: inline-flex）のすべての子は、自動的にフレックスアイテムになります（フレックスアイテムの子のレイアウトは関係ありません）。フレックスアイテムには表示プロパティはありません。代わりに、フレックスアイテムの子をレイアウトする方法に応じて、他の値に設定します。

したがって、displayをY要素のX値に設定すると（Yがフレックスコンテキストに参加していることを考慮すると、Yはフレックスアイテムです）、私はいつもflex-ブロックレベルの要素のように（この書式のコンテキストでは、フレックスコンテナ内で）動作する項目ですか？

（換言すれば、Yは関係なく、ブロックのフォーマットコンテキストに参加するかどうかX =ブロック/インライン/テーブルセル/インライングリッド/ ...等、右？）

• X - の非ブロック値
• Y - フレックスアイテム、html要素

これ：

<div id="flex-container" style="display:flex"> 
    <div id="flex-item" style="display: inline;">item</div> 
</div> 

はこれに等しいです（

<div id="flex-container" style="display:flex"> 
    <div id="flex-item" style="display: block;">item</div> 
</div> 

Answer 1

）副作用なしflex itemであるための唯一の条件は、フレックスコンテナのインフロー子中です。

注これはテキストの連続走行が任意の要素に対応していない匿名のフレックス項目内にラップできることを意味し、次の

のいずれかの場合、フレックスコンテナの要素の子は、フレックスアイテムではないかもしれません

• それはabsolutely positioned

  フレックスレイアウトに参加していないフレックスコンテナの絶対-位置付け子です。

• これは、任意のボックスを生成しないdisplay: contents

  要素自体を持っていますが、その子と 擬似要素はまだ通常通りのボックスを生成します。 ボックスの生成とレイアウトの目的のために、 が文書の ツリーの子要素と擬似要素に置き換えられているかのように扱われなければなりません。

  その子供は、代わりにフレックスアイテムになります（このリストのものが該当する場合を除きます）。

• はdisplay: none

  要素有し、その子孫にはボックスを生成しません。

• これは、要素が全くボックスを生成しないbox-suppress: discard

  を持っています。

• それはbox-suppress: hide

  要素は、通常通りのボックスを生成しているが、これらのボックスは はどのような方法でレイアウトに参加しないと表示されてはなりません。フレックスコンテナの子が匿名親を生成display値を持っていた場合

• 以前は、その親ではなく子のフレックスアイテムとなりました。これは変更され、子はフレックスアイテムになり、親は生成されません。それとは別に

、はい、display値はフレックス項目であることから要素を防ぐべきではありません。たとえばinline-blockためinline-flexがflexなり、inline-tableがtableなり、blockなるよう

これは、フレックスアイテムは常にブロック - になりますどんな指定outer display role、ということを意味

など、フレックス項目がblockifiedであることに注意してくださいレベル。

基本的に、displayプロパティは、フレックスアイテムで使用される場合、inner display layout modelを設定するためにのみ有効です。フレックスアイテムをそのコンテンツのフレックスコンテナにしたいということです。

flex itemは、 コンテンツの新しい書式設定コンテキストを確立します。この書式設定コンテキストのタイプは、通常どおり、 displayの値で決定されます。ただし、フレックスアイテム自体は、ブロックレベルボックスではなく、 フレックスレベルボックスです。ブロック形式ではなく、コンテナのフレックスフォーマットコンテキストに参加します。ブロックフォーマットではなく、 コンテキストです。

（用語の表記はフレックスアイテムが外部表示の役割でブロックレベルであると表示されていますが、フレックスボックスの仕様では、ブロックレベルではないという意味でブロックレベルではありません参加しているのはブロックではありません）