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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7555
15
1384
52
83
11
28
96
Windows 11 でコンテンツの適応型明るさを設定する方法
Apr 14, 2023 pm 12:37 PM
明るさの調整は、表示されているコンテンツや照明条件に基づいて画面の明るさレベルを調整する Windows 11 コンピューターの機能です。一部のユーザーはまだ Windows 11 の新しいインターフェイスに慣れていないため、明るさの自動調整機能を簡単に見つけることができず、明るさの自動調整機能が Windows 11 にないという人もいます。そのため、このチュートリアルですべてを解決します。たとえば、YouTube ビデオを視聴していて、ビデオに突然暗いシーンが表示された場合、明るさの調整により画面が明るくなり、コントラスト レベルが上がります。これは、コンピュータ、スマートフォン、またはデバイスが周囲の照明に基づいて明るさレベルを調整できるようにする画面設定である自動明るさとは異なります。フロントカメラには特別なものがあります
Vue を使用してアダプティブ モバイル インターフェイスを構築するにはどうすればよいですか?
Jun 27, 2023 am 11:05 AM
モバイル インターネットの普及に伴い、モバイル エクスペリエンスを考慮する必要がある Web サイトやアプリケーションがますます増えています。人気のあるフロントエンド フレームワークとして、Vue には応答性の高いレイアウトと適応機能があり、適応モバイル インターフェイスの構築に役立ちます。この記事では、Vue を使用してアダプティブ モバイル インターフェイスを構築する方法を紹介します。単位として px の代わりに rem を使用したり、モバイル インターフェイスの単位として px を使用したりすると、さまざまなデバイスで表示効果に一貫性がなくなる可能性があります。したがって、単位として px ではなく rem を使用することをお勧めします。レムは相対的なものです
CSS ビューポート単位 vmin および vw を使用してアダプティブ画像サイズを実装する方法
Sep 13, 2023 am 08:18 AM
CSSViewport ユニット vmin および vw を使用して適応型画像サイズを実装する方法 Web デザインでは、画像を画面サイズに適応させる必要がある状況によく遭遇します。この目標を達成するために、CSS はビューポート ユニットという強力なユニットを提供します。このうち、vmin はビューポート幅の小さい方の割合を表し、vw はビューポート幅の割合を表します。したがって、これら 2 つのユニットを使用して、適応型画像サイズの効果を実現できます。具体的には以下でご紹介します
vue は適応可能ですか?
Dec 30, 2022 pm 03:25 PM
Vue は自己適応を実現できます。自己適応を実現する方法は次のとおりです: 1. 「npm install」または「yarn add」コマンドを使用して「scale-box」コンポーネントをインストールし、「scale-box」を使用して適応スケーリングを実現します。 ; 2. 自己適応を実現するためにデバイスのピクセル比を設定します; 3. JS を通じてズーム属性を設定し、自己適応を達成するためにズーム率を調整します。
CSS ビューポート: vmax と vw を使用して適応型テキスト幅を実装する方法
Sep 13, 2023 am 10:16 AM
CSSViewport: vmax と vw を使用してアダプティブ テキスト幅を実装する方法 モバイル デバイスの普及に伴い、レスポンシブ デザインは Web デザインにおける重要な概念になりました。中でも、異なる画面サイズでも一貫した表示効果を維持するための適応型テキスト幅は重要な技術です。この記事では、CSSViewport ユニット、特に vmax ユニットと vw ユニットを使用して、適応型テキスト幅を実装する方法を紹介します。理論的な説明に加えて、具体的な説明も提供します。
CSS Flex フレキシブル レイアウトの一般的な問題と解決策の詳細な説明
Sep 26, 2023 pm 01:19 PM
CSSFlex エラスティック レイアウトの一般的な問題と解決策の詳細な説明 はじめに: CSSFlex エラスティック レイアウトは、エレガントで簡潔な構文と強力な柔軟性を備えた最新のレイアウト方法であり、応答性の高い Web ページの構築に広く使用されています。ただし、実際のアプリケーションでは、要素が期待どおりに配置されない、サイズが一貫していないなど、いくつかの一般的な問題が発生することがよくあります。この記事では、これらの問題について詳しく紹介し、それに対応する解決策を示します。コード例は次のとおりです。 1. 要素の配置が期待どおりにならない 問題の説明: Flex を使用する場合
HTML、CSS、jQuery を使用してレスポンシブ Web サイトのレイアウトを作成する方法
Oct 27, 2023 am 11:06 AM
HTML、CSS、jQuery を使用してアダプティブ Web サイト レイアウトを作成する方法 今日のインターネット時代では、Web サイトのアダプティブ レイアウトが必須の要件になっています。 Web サイトのアダプティブ レイアウトにより、Web サイトはさまざまなデバイス上で優れたユーザー エクスペリエンスを表示し、コンピューター、タブレット、携帯電話など、さまざまな画面サイズのデバイスに適応できます。この記事では、HTML、CSS、jQuery を使用してレスポンシブな Web サイトのレイアウトを作成する方法を紹介し、具体的なコード例を示します。 HTMLを使用してWebサイトのスケルトンを作成する
CSS Flex レイアウトを使用して複数列のタイル効果を作成する方法
Sep 28, 2023 pm 09:04 PM
CSSFlex エラスティック レイアウトを使用して複数列のタイル効果を作成する方法 Web 開発では、製品リストやフォト ウォールなどの表示など、複数列のタイル効果を作成する必要がある状況によく遭遇します。従来の方法は通常、フローティング レイアウトまたは固定幅の設定を使用して実装されますが、これらの方法は十分な柔軟性がなく、適応性に一定の問題があります。 CSSFlex の柔軟なレイアウトは、よりシンプルで効率的なソリューションを提供します。 CSSFlex エラスティック レイアウトは、CSS3 で導入されたレイアウト モードです。
