基本的な3列レイアウト 。容器{ ディスプレイ: フレックス; 幅: 500ピクセル; 高さ: 200px; } 。左{ フレックス:1; 背景: 赤; } 。真ん中{ フレックス:1; 背景: 緑; } 。右{ フレックス:1; 背景: 青; } <div class="コンテナ"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> 左と中央は固定幅、右は適応幅の3列 。容器{ ディスプレイ: フレックス; 高さ: 300px; } 。左{ フレックス: 0 0 100px; 背景色: 赤; } 。真ん中{ フレックス: 0 0 100px; 背景色: 緑; } 。右{ フレックス:1; 背景色: 青; } <div class="コンテナ"> <div class="left">qqq</div> <div class="middle">qqq</div> <div class="right">wwww</div> </div> ブラウザウィンドウを縮小した後 左右は固定、中央は適応型 。容器{ ディスプレイ: フレックス; 高さ: 300px; } 。左{ 幅: 100ピクセル; 背景色: 赤; } 。真ん中{ フレックス: 1; 背景色: 緑; } 。右{ 幅: 100ピクセル; 背景色: 青; } <div class="コンテナ"> <div class="left">qqq</div> <div class="middle">qqq</div> <div class="right">wwww</div> </div> ブラウザウィンドウを縮小した後 9グリッドレイアウト 。容器{ ディスプレイ: フレックス; 高さ: 300px; 幅: 300ピクセル; flex-direction: 列; } 。行{ ディスプレイ: フレックス; 高さ: 100px; } 。左{ フレックス: 1; 高さ: 100px; 境界線: 1px 実線の赤; } 。真ん中{ フレックス: 1; 高さ: 100px; 境界線: 1px 緑; } 。右{ フレックス: 1; 高さ: 100px; 境界線: 1px 青 } <div class="コンテナ"> <div class="row"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> <div class="row"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> <div class="row"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> </div> 聖杯レイアウト *{ マージン:0; パディング:0; } 。容器{ ディスプレイ: フレックス; flex-direction: 列; 最小高さ: 100vh; コンテンツの両端揃え: スペースの間; } 。ヘッダ{ 背景: 赤; フレックス: 0 0 100px; } 。コンテンツ{ ディスプレイ: フレックス; フレックス:1; } .content-left{ フレックス: 0 0 100px; 背景: 緑; } .コンテンツ右{ フレックス: 0 0 100px; 背景: ピンク; } .content-middle{ フレックス:1; } .フッター{ 背景: 黄色; フレックス: 0 0 100px; } <div class="コンテナ"> <div class="header">ヘッダー</div> <div class="content"> <div class="content-left">左</div> <div class="content-middle">中央</div> <div class="content-right">右</div> </div> <div class="footer">フッター</div> </div> ブラウザウィンドウを縮小した後 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: nacos が mysql に接続できない場合の解決策
前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...
この記事では、WebSocketを使用して簡単なチャットルームの会話を実装するための具体的なコードを...
昨日のプロジェクト開発中に、スタイルの読み込み優先順位に関する問題が発生しました。クラスは定義され、...
1.dockerをオンラインでダウンロードする yum インストール -y epel-release...
HTMLで表を描くには、表タグを使用します。 trは行を意味しますtdは列を示すth はテーブ...
目次1. 動的型付けとは何ですか? 2. データ型2.1 プリミティブ型 (6 つのプリミティブ型、...
Windows サーバー リモート デスクトップのデフォルトのポート番号は 3389 です。職場でサ...
序文MySQL の rowid の概念については聞いたことがあるかもしれませんが、テストや実践が難し...
現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...
問題の説明データ転送に Nginx を使用し、フロントエンドとバックエンドが分離された Spring...
目次1. ソースコード1.1 モノレポ1.2 タイプスクリプト2. パフォーマンス2.1 ソースコー...
序文:日々の勉強や仕事の中で、データをエクスポートする必要に迫られることがよくあります。たとえば、デ...
1.1 iptablesファイアウォールの概要Netfilter/Iptables (以下、Ipta...
LocalStorageはブール値を保存します今日、ブール値データを保存するために localsto...
Linux の操作と構成作業では、デュアル ネットワーク カードのバインディングがよく使用されます。...