CSS flex 複数列レイアウト

CSS flex 複数列レイアウト

基本的な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 に接続できない場合の解決策

>>:  Vueカウンターの実装

推薦する

CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴

前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...

Websocket に基づくシンプルなチャットルームダイアログの実装

この記事では、WebSocketを使用して簡単なチャットルームの会話を実装するための具体的なコードを...

CSS スタイルの読み込みの優先順位に関する経験の共有

昨日のプロジェクト開発中に、スタイルの読み込み優先順位に関する問題が発生しました。クラスは定義され、...

Tomcat および Web アプリケーションの Docker デプロイメントの実装

1.dockerをオンラインでダウンロードする yum インストール -y epel-release...

HTML テーブル_Powernode Java アカデミー

HTMLで表を描くには、表タグを使用します。 trは行を意味しますtdは列を示すth はテーブ...

この記事では、jsのデータ型とデータ構造の世界を紹介します。

目次1. 動的型付けとは何ですか? 2. データ型2.1 プリミティブ型 (6 つのプリミティブ型、...

Windows Server 2008 R2 リモート デスクトップのポート 3389 を変更する方法

Windows サーバー リモート デスクトップのデフォルトのポート番号は 3389 です。職場でサ...

MySQL で主キーと ROWID を使用する際の落とし穴の概要

序文MySQL の rowid の概念については聞いたことがあるかもしれませんが、テストや実践が難し...

MySQL 学習ノート: データ エンジン

現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...

Nginx ポート競合を解決するトラブルシューティング方法の例

問題の説明データ転送に Nginx を使用し、フロントエンドとバックエンドが分離された Spring...

Vue3のいくつかの利点についての簡単な説明

目次1. ソースコード1.1 モノレポ1.2 タイプスクリプト2. パフォーマンス2.1 ソースコー...

MySQLにデータを素早くインポートする方法

序文:日々の勉強や仕事の中で、データをエクスポートする必要に迫られることがよくあります。たとえば、デ...

Linuxファイアウォールiptablesの詳細な紹介、設定方法と事例

1.1 iptablesファイアウォールの概要Netfilter/Iptables (以下、Ipta...

ローカルストレージにブール型の値を保存する際の落とし穴を解決する

LocalStorageはブール値を保存します今日、ブール値データを保存するために localsto...

Linux デュアル ネットワーク カード バインディング スクリプト メソッドの例

Linux の操作と構成作業では、デュアル ネットワーク カードのバインディングがよく使用されます。...