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カウンターの実装

推薦する

MySQLのINサブクエリによってインデックスが使用できなくなる問題を解決する

今日は、MySQL IN サブクエリの最適化に関するケーススタディを見ました。最初は少し懐疑的でした...

Vue 円形パーセンテージ プログレスバー コンポーネントの機能の実装

必要な方はどなたでも参考にしてください。試してみて問題が見つかった場合は、メッセージを残してお知らせ...

MySQL 5.7 でルートパスワードを変更する方法に関するチュートリアル

バージョンアップデートにより、元のユーザーのパスワードフィールドがauthentication_st...

Web デザインのための 5 つのシンプルな XHTML Web フォーム

Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...

LinuxはNetworkManagerを使用してMACアドレスをランダムに生成します

今では、自宅のソファーに座っていても、外の喫茶店にいても、ノートパソコンの電源を入れてWi-Fiに接...

Linux オペレーティング システムで ssh/sftp を構成して権限を設定する方法

FTP と比較すると、SSH ベースの sftp サービスは、セキュリティが優れており (非プレーン...

ドロップダウンメニューを実現するためのHTML+CSS

1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...

MySQLの日付と時刻の間隔計算の分析例

この記事では、例を使用して、MySQL の日付と時刻の間隔計算について説明します。ご参考までに、詳細...

ウェブサイトのコンテンツの100~1%はナビゲーションである

ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...

docker-maven-plugin の詳細な使用方法

目次Docker-Maven-プラグインMavenプラグインの自動デプロイメント手順1. ホストマシ...

JS での filter() 配列フィルターの使用

目次1. はじめに2. 方法の紹介3. 使用例要約する1. はじめに配列フィルターは、フロントエンド...

CSS スタッキングと Z インデックスのサンプルコード

カスケードとカスケードレベルHTML 要素は 3 次元の概念です。水平方向と垂直方向に加えて、「Z ...

Vue で ToDo アプリケーションを実装する例

背景まず最初に、私はフロントエンド開発の専門家ではないことを述べておきたいと思います。私の以前のコン...

MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル (Windows 10 X64)

最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...

Linux/Mac MySQL パスワードを忘れた場合のパスワード変更コマンドラインメソッド

すべての前提条件にはルート権限が必要です1. MySQLプロセスを終了する //Linux sudo...