CSS Flex レイアウトを通じて適応型の左右のサイドバーを実現する方法-CSSチュートリアル-php.cn

CSS Flex レイアウトを通じて適応型の左右のサイドバーを実現する方法

WBOY

リリース： 2023-09-26 10:57:02

オリジナル

1429 人が閲覧しました

如何通过Css Flex 弹性布局实现左右侧边栏的自适应

Css Flex エラスティックレイアウトを通じて左右のサイドバーのアダプティブレイアウトを実現する方法

はじめに: Web デザインの継続的な開発により、ページは重要な要件になっています。 CSS Flex レイアウトは、この問題を解決する良い方法です。この記事では、CSS Flex エラスティックレイアウトを使用して左右のサイドバーのアダプティブレイアウトを実装する方法を紹介し、詳細なコード例を示します。

1. Flex Layout の概要
1.1 フレキシブルコンテナとフレキシブルアイテム
Flex レイアウトは、コンテナ内のサブ要素をフレキシブルアイテムとして設定することでレイアウトを実装します。親要素はフレックスコンテナと呼ばれ、子要素はフレックスアイテムと呼ばれます。フレキシブルコンテナでは、いくつかのプロパティを設定することで、子要素の配置とそれらが占めるスペースを制御できます。

1.2 フレキシブルコンテナのプロパティ

display: flex: コンテナをフレキシブルコンテナとして設定します;
flex-direction: フレキシブルアイテムの配置を設定します。行 (水平方向) または列 (垂直方向) を設定できます;
justify-content: フレックススタートに設定できる、主軸上のフレキシブル項目の配置を設定します (開始点は左または上近く)、flex-end (終点が右または下に近い)、center (中央に揃える)、space-between (両端に揃える、アイテム間の等間隔)、space-around (項目の両側に等間隔、項目間の間隔の半分);
align-items: 交差軸上の柔軟な項目の配置を設定します。これは、flex-start (開始点) に設定できます。上または左の近くにあります)、フレックスエンド (終点が下または右の近くにあります)、センター (中央揃え)、ストレッチ (交差軸全体を満たすようにストレッチします)、ベースライン (テキストの最初の行のベースライン揃え)アイテムの）。

1. エラスティックアイテムのプロパティ

flex: エラスティックアイテムの拡大縮小率を設定します。デフォルト値は 0 で、max-width: none と同等です。 flex-grow 0 ; flex-shrink: 0; 特定の値は、整数 (1 など) または小数 (1.5 など) にすることができます;
flex-basis: フレキシブル項目の初期サイズを設定します主軸のデフォルト値は auto で、項目の元のサイズと同等です;
align-self: 交差軸上の柔軟な項目自体の位置合わせを設定します。

2. 左右のサイドバーのアダプティブレイアウトの例
具体的な例を使用して、Css Flex エラスティックレイアウトを通じて左右のサイドバーのアダプティブレイアウトを実装する方法を示します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左右侧边栏自适应布局示例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        .container {
            display: flex;
            flex-direction: row;
        }
        
        .sidebar {
            background-color: #f1f1f1;
            width: 20%;
            flex-grow: 1;
        }
        
        .content {
            background-color: #eee;
            width: 80%;
            flex-grow: 3;
        }
        
        .sidebar, .content {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h2>左侧边栏</h2>
            <p>左侧边栏内容</p>
        </div>
        <div class="content">
            <h1>主要内容区域</h1>
            <p>主要内容</p>
        </div>
    </div>
</body>
</html>

ログイン後にコピー

上記のコードは、左右のサイドバーの単純なレイアウトの例です。コンテナの display:flex; と flex-direction:row; を設定することで、子要素を水平方向に配置します。左側のサイドバーの

width: 20%; と右側のコンテンツ領域の width: 80%; は、水平方向の 2 つの比率を制御します。つまり、左の列は幅の 20% を占め、コンテンツ領域は幅の 80% を占めます。

左側のサイドバーの flex-grow: 1; と右側のコンテンツ領域の flex-grow: 3; を設定することで、左側と右側のサイドバーは適応型です。これは、左側のサイドバーが利用可能なスペースの 1/4 を占め、右側のコンテンツ領域が利用可能なスペースの 3/4 を占めることを意味します。

結論:
Css Flex エラスティックレイアウトを使用して、左右のサイドバーのアダプティブレイアウトを実装するのは比較的簡単です。親コンテナをフレックスコンテナに設定し、関連するプロパティを使用するだけです。子要素のレイアウト、並べ替え、配置、占めるスペースの比率を制御するための flex。この記事では、読者が参照して学習できる具体的なコード例を示します。この記事がお役に立てば幸いです!

以上がCSS Flex レイアウトを通じて適応型の左右のサイドバーを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。