ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS Flex レイアウトを通じて適応型の左右のサイドバーを実現する方法
CSS Flex レイアウトを通じて適応型の左右のサイドバーを実現する方法
- WBOYオリジナル
- 2023-09-26 10:57:021574ブラウズ
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 サイトの他の関連記事を参照してください。