この記事では主に、CSS3 フレックスレイアウトを使用して要素を均等に配置する方法を紹介します。自分用にメモを残して皆さんと共有します。詳細は次のとおりです。 例1: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>フレックスレイアウト</title> <スタイル> *{ パディング:0; マージン:0; } 本文、html{ 高さ:100vh; 最小幅: 800px; } 。容器{ ディスプレイ:フレックス; flex-wrap:ラップ; display: -webkit-flex; /* Safari */ } .コンテナ>.アイテム{ 境界線: 1px 黒一色; フレックス:1; 高さ:100px; 背景: #abcdef; } </スタイル> </head> <本文> <div class="コンテナ"> <div class="item"></div> <メインクラス="item"></メイン> <div class="item"></div> </div> </本文> </html> 例2: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>フレックスレイアウト</title> <スタイル> *{ パディング:0; マージン:0; ボックスのサイズ: 境界線ボックス; } 本文、html{ 幅: 100%; 高さ:100vh; 最小幅: 800px; ディスプレイ:フレックス; display: -webkit-flex; /* Safari */ コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 } 。容器{ 幅: 300ピクセル; 高さ: 300px; ディスプレイ:フレックス; display: -webkit-flex; /* Safari */ flex-wrap: ラップ; } .コンテナ>.アイテム{ フレックス:0 0 33.3%; 高さ:100px; 背景: #abcdef; 境界線: 1px 実線の赤; } 主要{ フレックス:0 0 33.3%; 高さ:100px; 背景色: #ccc; 境界線: 1px 実線の赤; } </スタイル> </head> <本文> <div class="コンテナ"> <div class="item">左</div> <main>メイン</main> <div class="item">右</div> <div class="item">左</div> <main>メイン</main> <div class="item">右</div> <div class="item">左</div> <main>メイン</main> <div class="item">右</div> </div> </本文> </html> flex:0 0 33.3% は flex-basis:33.3% と同等で、各要素の幅が外側のコンテナーの 33.3% になるため、各行に最大 3 つの要素を配置できます。 flex-wrap:wrap は、各行がいっぱいになると自動的に折り返されることを意味します。 例3: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>フレックスレイアウト</title> <スタイル> *{ パディング:0; マージン:0; ボックスのサイズ: 境界線ボックス; } 本文、html{ 幅: 100%; 高さ:100vh; 最小幅: 800px; ディスプレイ:フレックス; display: -webkit-flex; /* Safari */ コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 } 。容器{ 幅: 300ピクセル; 高さ: 300px; マージン: 50px; ディスプレイ:フレックス; display: -webkit-flex; /* Safari */ flex-wrap: ラップ; コンテンツの両端揃え: スペースの間; } .コンテナ>.アイテム{ フレックス:0 0 30%; 高さ:90px; 背景: #abcdef; 境界線: 1px 実線の赤; } 主要{ フレックス:0 0 30%; 高さ:90px; 背景色: #ccc; 境界線: 1px 実線の赤; } </スタイル> </head> <本文> <div class="コンテナ"> <div class="item">左</div> <main>メイン</main> <div class="item">右</div> <div class="item">左</div> <main>メイン</main> <div class="item">右</div> <div class="item">左</div> <main>メイン</main> <div class="item">右</div> </div> </本文> </html> justify-content:space-between は、主軸方向の余分なスペースが 2 つの項目間に均等に分散されることを意味します。 CSS3 flexレイアウトを使用して要素を均等に配置するサンプルコードについての記事はこれで終わりです。flexを使用して要素を均等に配置する方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 |
<<: ウェブページの画像最適化ツールと使用方法のヒントの共有
最近、Linux を使用してローカルにログインしていたところ、正常にログインできず、次のエラー メッ...
インターネット上の this.$set の説明はわかりにくいと感じます。単一データ、オブジェクト、配...
負荷は通常、システム設計時に予測されます。システムがパブリック ネットワークに公開されている場合、悪...
1.リスナーを見る時計のご紹介 'vue' から { ref, reactive, ...
シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で...
背景色と透明度の設定上記のように、最初の画像の場合は、灰色の背景と左上隅に白い「カバー」という文字を...
GitHubアドレス、気に入ったらスターを付けてくださいプラグインのプレビューチュートリアル1. プ...
Linuxにフラッシュをインストールする方法1. Flashの公式サイトにアクセスし、ダウンロードを...
CPU 負荷と CPU 使用率これらは両方とも、ある程度、マシンの忙しさを反映できます。 CPU 使...
開発中に画像とテキストが 1 行に表示されることはよくあります。2 つのインライン要素を揃えるのは通...
目次導入ミラーリポジトリログイン引く押す検索ローカル画像管理画像rmiタグ建てる歴史保存負荷輸入コン...
インターネット経済の継続的な発展に伴い、インターネット上の専門ウェブサイト、公共サービスウェブサイト...
今では、自宅のソファーに座っていても、外の喫茶店にいても、ノートパソコンの電源を入れてWi-Fiに接...
具体的なコードは次のとおりです。 <a href="#"> <...
概要: nginx リバース プロキシ jira を構成し、https を実装します。Tomcat ...