CSS中級者向けアダプティブレイアウトの5つのソリューションの詳細な説明

序文

ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも多いので、今日はページレイアウトに関する内容をまとめてみます。

質問: 3 列レイアウト (固定高さ、左・中央・右構造) を実装する方法

高さがわかっていると仮定して、左と右の幅が両方とも 300 ピクセルで、中央が適応型の 3 列レイアウトを記述してください。

上記のトピックを読んだ後、経験豊富な人はそれが非常に簡単だと思うかもしれません。よく考えてみてください。私たちがそれを書き出すとしたら、いくつの解決策を思いつくでしょうか?一般的には、float と position の 2 種類が思い浮かびます。実は、この 2 つに加えて、さらに 3 種類の記述方法があります。1 つずつ紹介します。

ソリューション 1 (フロート)

<セクションクラス='レイアウトフロート'>
         <スタイル>
             .layout.float .left-right-center{
                 高さ: 100px;
             }
             .layout.float .left{
                 フロート: 左;
                 幅: 300ピクセル;
                 背景色: 赤;
             }

             .layout.float .right{
                 フロート: 右;
                 幅: 300ピクセル;
                 背景色: 青;
             }

             .layout.float.center{
                 背景色: 黄色;
             }
         </スタイル>
         <記事クラス="left-right-center">
             <div class="left"></div>
             <div class="right"></div>
             <div class="center">私は真ん中の適応要素、つまり浮遊している要素です</div>
         </記事>
     </セクション>

原則: 左右の 2 つの div がドキュメントフローから外れるため、中央が上に移動し、3 列のレイアウト効果が得られます (高さが同じである場合)
利点: 高い互換性
デメリット: 他の要素に影響を与えないようにフロートをクリアする必要がある
高さが固定されていない場合、中央のコンテンツが引き伸ばされ、左右の両側は一緒に引き伸ばされません。

ソリューション2（絶対位置指定）

<セクションクラス="レイアウト絶対">
         <スタイル>
             .layout.absolute .left-center-right div{
                 位置: 絶対;
                 高さ: 100px;
             }

             .layout.absolute.left{
                 左: 0;
                 幅: 300ピクセル;
                 背景色: 赤;
             }

             .layout.absolute.center{
                 左: 300ピクセル;
                 右: 300px;
                 背景色: 黄色;
             }

             .layout.absolute.right{
                 右: 0;
                 幅: 300ピクセル;
                 背景色: 青;
             }
         </スタイル>
         <記事クラス="左-中央-右">
            <div class="left"></div>
            <div class="center">
                私は真ん中の適応要素です - 絶対的な位置付け</div>
            <div class="right"></div>
         </記事>
     </セクション>

原則：絶対位置と幅を使用して左右のdivを固定すると、中央のdivの幅が適応効果を発揮します。
利点: 高速
デメリット: 親要素がドキュメントフローの外側にある場合、子要素も必ずドキュメントフローの外側にあるため、使用できるシナリオは多くありません。
中央の要素の高さが増加しても、両側の要素の高さは増加しないため、中央のdivのみが拡大します。

ソリューション3（フレックスレイアウト）

<セクションクラス="レイアウトフレックス">
         <スタイル>
             .layout.flex .left-center-right{
                 ディスプレイ: フレックス;
                 高さ: 100px;
             }

             .layout.flex .left{
                 幅: 300ピクセル;
                 背景色: 赤;
             }

             .layout.flex .center{
                 フレックス: 1;
                 背景色: 黄色;
             }

             .layout.flex .right{
                 幅: 300ピクセル;
                 背景色: 青;
             }
         </スタイル>
         <記事クラス="左-中央-右">
            <div class="left"></div>
            <div class="center">
                私は真ん中の適応要素です - フレックスレイアウト</div>
            <div class="right"></div>
         </記事>
     </セクション>

原則：親要素をフレックスレイアウトに設定し、中間要素のフレックスを1に設定して適応効果を実現します。
利点: 実際の開発でよく使用される
デメリット: IE8以下のブラウザではサポートされていない
高さが固定されていない場合、中央のコンテンツの高さが拡大し、それに応じて両側も拡大します。

ソリューション4（テーブルレイアウト）

   <section class="レイアウトテーブル">
        <スタイル>
            .layout.table .left-center-right{
                表示: テーブル;
                高さ: 100px;
                幅: 100%;
            }

            .layout.table .left{
                表示: テーブルセル;
                幅: 300ピクセル;
                背景色: 赤;
            }

            .layout.table .center{
                表示: テーブルセル;
                背景色: 黄色;
            }

            .layout.table .right{
                表示: テーブルセル;
                幅: 300ピクセル;
                背景色: 青;
            }
        </スタイル>
        <記事クラス="左-中央-右">
            <div class="left"></div>
            <div class="center">
                私は真ん中の適応要素です - テーブル
            </div>
            <div class="right"></div>
        </記事>
    </セクション>

原則：親要素をテーブルレイアウトに設定し、各子要素をテーブルセルに設定し、左と右のグリッドに固定幅を設定し、中央のグリッドで適応効果を実現できます。
利点: 互換性が高く、IE8 以前のバージョンではフレックスレイアウトの代替として使用できます。
デメリット: 制限
高さが固定されていない場合、中央が伸びると、左右のサイドも伸びます。これはフレックスと同様です。

オプション 5 (グリッドレイアウト)

<セクションクラス="レイアウトグリッド">
        <スタイル>
            .layout.grid .left-center-right{
                表示: グリッド;
                幅: 100%;
                grid-template-rows: 100px;/*各グリッドの高さは100pxです*/
                grid-template-columns: 300px auto 300px;/*左と右のグリッドはどちらも 300px で、中央のグリッドは適応型です*/
            }
            
            .レイアウト.グリッド.左{
                背景色: 赤;
            }

            .レイアウト.グリッド.センター{
                背景色: 黄色;
            }

            .layout.grid .right{
                背景色: 青;
            }
        </スタイル>
        <記事クラス="左-中央-右">
            <div class="left"></div>
            <div class="center">
                私は真ん中の適応要素です - グリッドレイアウト</div>
            <div class="right"></div>
        </記事>
    </セクション>

原則: 親要素をグリッドレイアウトに設定し、各グリッドの高さと幅を指定してから、各グリッドの色を個別に設定します。
利点: 比較的新しい技術、便利
デメリット: 互換性があまり良くない
高さが固定されていない場合、中央の要素にテキストを追加しても拡大されません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: Vue.jsはシンプルな折りたたみパネルを実装します

>>: MySQL Group by最適化の詳細な説明