フレックスレイアウトを使用してページレイアウトを簡単に実装するためのサンプルコード

では、早速コードを見てみましょう。

1. 上部、中央、下部のレイアウト:

<!DOCTYPE html>

    <html lang="ja">
    <ヘッド>
     <メタ文字セット="UTF-8">
     <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
     <title>ドキュメント</title>
     <スタイル>
     体 {
     位置: 絶対;
     左: 0; 右: 0; 上: 0; 下: 0;
     パディング: 0; マージン: 0;
     ディスプレイ: フレックス;
     flex-direction: 列;
     }
     .ヘッダー、.フッター{
     高さ: 50px;
     }
     。体 {
     フレックス成長: 1;
     背景色: #DDD;
     }
     </スタイル>
    </head>
    <本文>
     <div class="header">ヘッダー</div>
     <div class="body">コンテンツ</div>
     <div class="footer">フッター</div>
    </本文>
    </html>

表示効果は以下のとおりです。

2. 左右のレイアウト：

    <!DOCTYPE html>
    <html lang="ja">
    <ヘッド>
     <メタ文字セット="UTF-8">
     <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
     <title>ドキュメント</title>
     <スタイル>
     体 {
     位置: 絶対;
     左: 0; 右: 0; 上: 0; 下: 0;
     パディング: 0; マージン: 0;
     ディスプレイ: フレックス;
     }
     .左、.右{
     高さ: 100%;
     }
     。左 {
     幅: 250ピクセル;
     背景色: rgba(255,0,0,0.3);
     }
     。右 {
     ディスプレイ: フレックス;
     flex-direction: 列;
     }
     .ヘッダー、.フッター{
     高さ: 50px;
     }
     .right、.content {
     フレックス成長: 1;
     }
     。コンテンツ {
     背景色: #DDD;
     }
     </スタイル>
    </head>
    <本文>
     <div class="left">左ナビゲーション</div>
     <div class="right">
     <div class="header">ヘッダー</div>
     <div class="content">コンテンツ</div>
     <div class="footer">フッター</div>
     </div>
    </本文>
    </html>

ページ効果は次のとおりです。

必要なレイアウトを設計できる主要なスタイルをいくつか紹介します。

flex-grow: 1; // コンテナの主軸の幅が余っている場合、子アイテムが残りのスペースを占めることを示します。position: absolute; left: 0; right: 0; top: 0; bottom: 0; // このスタイルセットにより、要素は配置された親要素を完全に占めることができます。

フレックスレイアウトを使用してページレイアウトを簡単に実装するためのサンプルコードに関するこの記事はこれで終了です。フレックスページレイアウトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL インデックスデータ構造の詳細な分析

>>: HTML/XHTML における img 画像タグの基本的な使用法の詳細な説明