フレックスボックス項目に「表示」を設定すると、デフォルトの動作を超えた実際の利点が得られますか?

フレックス ボックス項目の表示プロパティの重要性を調べる

質問:

個々のフレックスの表示プロパティを調整できますボックスアイテムは何か明確な利点や結果をもたらしますか?具体的には、表示をブロックまたはインラインブロックに設定するとどのような影響がありますか?

回答:

CSS 仕様では、インラインレベルの表示値がフレックス項目に割り当てられることを明確にしています。ブロックレベルの対応するものに変換されます。したがって、display を明示的に block または inline-block に設定しても、どちらもブロックに解決されるため、認識できる変化は生じません。

ただし、display プロパティが table、inline-table、inline-grid に設定されている場合、重大な影響が生じる可能性があります。 、またはグリッド。このような場合、フレックス項目は指定された表示タイプの特性を採用し、そのプレゼンテーションと動作を変更します。

次の HTML と CSS の例を考えてみましょう。

<div class="box">
  <div>
    <span></span>

    <span></span>
  </div>
</div>

<div class="box">
  <div>
<pre class="brush:php;toolbar:false">.box {
  display: flex;
  margin: 5px;
}

.box > div {
  height: 50px;
  width: 100%;
  background: red;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr;
  grid-gap: 20px;
}

span {
  border: 2px solid green;
}

In最初のボックスでは、ネストされた div の表示プロパティが明示的に設定されていません。その結果、デフォルトのブロック化された表示が適用されます。対照的に、2 番目のボックスでは、表示が inline-grid に設定されており、内部 div がグリッド要素として動作します。これは、スパンの周囲の緑色の境界線から明らかであり、それに応じて位置合わせされています。