CSS3 のフレックスレイアウト幅の無効性の解決策

2 列レイアウトはプロジェクトでよく使用されます。この効果を実現する方法はたくさんあります。

ここに画像の説明を挿入

しかし、最も便利なのは flex です。外側の親要素に display:flex を設定し、子要素の幅を適応するように設定します。
flex-grow:1; と、固定幅を設定する別の方法でこれを実現できます。1 つは固定で、もう 1 つは適応型です。

具体的なコードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>フレックス幅は有効になりません</title>
</head>
<本文>
  <スタイル>
    /* スタイルをリセット */
    * {
      マージン: 0px;
      パディング: 0px;
    }
    /* 外側のレイヤーの表示をフレックスに設定する */
    。箱 {
      ディスプレイ: フレックス;
      高さ: 100px;
      幅: 100%;
    }
    /* 左側適応型*/
    .box .left {
      フレックス成長: 1;
      背景: 赤;
    }
    /* 右側を固定 */
    .box .right {
      幅: 200ピクセル;
      背景: 黄色;
    }
  </スタイル>
  <!-- 外側のボックス -->
  <div class="box">
    <!-- 左 -->
    <div class="left"></div>
    <!-- 右側 -->
    <div class="right"></div>
  </div>
</本文>
</html>

このコードを実行した結果は、上のスクリーンショットの通りですが、このコードには小さなバグがあります。つまり、左側（アダプティブ側）にコンテンツがあり、コンテンツの幅が左側の幅を超えると、右側（固定幅）が小さく圧縮され、指定した固定幅（例では 200px）が有効にならないか、スクロールバーが表示されることがわかります。
左側に少しコンテンツを追加して、幅を超えさせます。

   /* コンテンツ スタイルを超えています */
    .box .left .content {
      幅: 1000ピクセル;
    }

  <!-- 左 -->
    <div class="left">
      <!-- コンテンツ超過 -->
      <div class="content"></div>
    </div>

実行結果:

ここに画像の説明を挿入

コンテンツが制限を超え、スクロールバーが表示されます。この問題は簡単に解決できます。左側にオーバーフローの非表示属性を追加するだけです。

  /* 左側適応型*/
    .box .left {
      フレックス成長: 1;
      背景: 赤;
      オーバーフロー: 非表示;
    }

ここに画像の説明を挿入

しかし、再び問題が発生します。右側に表示されますが、幅が小さくなり、200 未満になります。
この問題は実はとても簡単です。右側の div に min-width:200px; を追加するだけで完璧になります。

/* 右側を固定 */
    .box .right {
      幅: 200ピクセル;
      最小幅: 200px;
      背景: 黄色;
    }

ここに画像の説明を挿入

こうすることで、どの画面を使用しても、どのようにドラッグアンドドロップしても、完全に互換性が保たれます。。。

CSS3 でフレックスレイアウトの幅が反映されない問題の解決方法についての記事はこれで終わりです。フレックスレイアウトの幅が反映されない問題の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Windows Server 2008R2、2012、2016、2019 の違い

>>: Vue のプラグインとコンポーネントの違いと使い方のまとめ