フレックス子の「高さ: 100%」がフレックスボックスを壊すのはなぜですか?

明示的な親の高さを指定せずにコンテナの高さを満たすようにフレックス子をストレッチする

コンテナ全体を埋めるためにフレックス子をストレッチする必要がある状況高さを指定する場合、親の高さが別の子のコンテンツに依存するようにする場合、子に「高さ: 100%」を設定すると、Flexbox で予期しない動作が発生する可能性があります。

「高さ: 100%」を使用する理由Break Flexbox

Flexbox で「高さ: 100%」を使用する場合:

• ストレッチされる要素の親には宣言された高さが必要ですが、これは Flexbox のデフォルトの動作に反します。
• 引き伸ばされた要素の上または下に他の子がある場合、「高さ: 100%」はその存在を無視し、競合が発生します。

解決策: " を削除します。 height: 100%"

フレックスボックスを壊さずに目的のストレッチを実現するには、子要素から「height: 100%」を削除するだけです。

説明

行方向 (デフォルト) の Flexbox では、「align-items」プロパティが垂直方向の動作を制御します。デフォルト設定は「ストレッチ」で、親に明示的な高さが設定されていない場合、フレックス項目は利用可能な高さを満たすように自動的にストレッチされます。

コード例

検討してください。次のコード スニペット:

<code class="html"><div style="display: flex">
  <div style="background-color: yellow; width: 20px"></div>
  <div style="background-color: blue">
    some<br>cool<br>text
  </div>
</div></code>

この例では、黄色の子は親の高さ全体を満たすように引き伸ばされ、親の高さは青色の子のテキスト コンテンツに基づいて自動的に調整されます。

以上がフレックス子の「高さ: 100%」がフレックスボックスを壊すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。