ホームページ > ウェブフロントエンド > CSSチュートリアル > フレックス子の「高さ: 100%」がフレックスボックスを壊すのはなぜですか?

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

Barbara Streisand
リリース: 2024-10-31 02:19:01
オリジナル
1026 人が閲覧しました

Why Does

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

コンテナ全体を埋めるためにフレックス子をストレッチする必要がある状況高さを指定する場合、親の高さが別の子のコンテンツに依存するようにする場合、子に「高さ: 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート