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

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 のプラグインとコンポーネントの違いと使い方のまとめ

推薦する

円形グラデーションプログレスバー効果を実現する CSS サンプルコード

実装のアイデア一番外側は大きな円(グラデーションカラー)グラデーションの円を覆うように、内側に半円を...

Tomcat 初回展開 Web プロジェクト プロセス図

独自のWebプロジェクトをtomcatディレクトリの下のwebappsディレクトリに配置します。 R...

ハイパーリンクAタグを学ぶ

聞く: CSS を使用してハイパーリンクのスタイルを設定しましたが、ホバーしても機能しません。なぜこ...

VMware 上の CentOS に Oracle12.2 をサイレント インストールする詳細なグラフィック チュートリアル

環境準備: VMware+CentOS、jdk 1. システムディスクのサイズを確認する1. コマン...

WeChatアプレットがシンプルな計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...

Redo ログと Undo ログに基づく MySQL クラッシュ回復の分析

目次MySQLクラッシュ回復プロセス1. ブラックボックス下のデータフローを更新する2. やり直しロ...

Vue 3 カスタムディレクティブ開発の概要

指令とは何ですか? Angular と Vue はどちらもディレクティブの概念を持っており、これは通...

React と Threejs を使用して VR パノラマ プロジェクトを作成する詳細なプロセス

最近、 Three.jsでReactを使用して、720 度のパノラマ写真を閲覧できるプロジェクトを構...

jQuery ステップ進行軸プラグインの実装コード

毎日のjQueryプラグイン - ステップ進捗軸 ステップ進捗軸ツール系のサイトでは入門チュートリア...

Docker を使用してエンタープライズレベルのカスタムイメージを構築する方法

序文退社前に、ある依頼を受けました。基本イメージ規格の変更により、最新の Docker イメージ規格...

Vue.js ディレクティブのカスタム命令の詳細な説明

デモコマンドをカスタマイズするVue カスタム ディレクティブの構文は次のとおりです。 Vue.di...

hrefを使用すると、リンクをクリックするだけでページ上の特定の場所にジャンプできます。

ページ内の a タグをクリックした後、ページ内の対応する場所にジャンプするようにします。方法は非常に...

Promise カプセル化 wx.request メソッド

前回の記事では、Promise を使用して小さなプログラム wx.request をカプセル化する実...

インストールされていないバージョンの MySQL を使用する手順とパスワードを忘れた場合の解決策

最初のステップは、圧縮されたパッケージを対応するディスクに解凍することです。 2 番目の手順は、cm...

Douyin ロゴを作成する手順の CSS3 分析

「Tik Tok」も大人気で、ユーザー数は7億人と言われています。今日は、注目を集めるためにTikT...