張新旭氏の記事を引用して皆さんにシェアしたいと思います。 変更を加えたい場合は、対応する画像によって生成されたリンクをクリックして変更してください。 問題の説明 //html <div class="コンテナ"> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> </div> //css 。容器 { ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; flex-wrap: ラップ; } .リスト{ 幅: 24%; 高さ: 100px; 背景色: スカイブルー; 上マージン: 15px; } この状況は明らかに私たちが望んでいるものとは異なります。 固定行数ソリューション 方法1: マージンを使用してギャップをシミュレートする 例えば 。容器 { ディスプレイ: フレックス; flex-wrap: ラップ; } .リスト{ 幅: 24%; 高さ: 100px; 背景色: スカイブルー; 上マージン: 15px; } .list:not(:n番目の子(4n)) { 右マージン: calc(4% / 3); } スタイルは以下のとおりです 方法2: 最後の行の番号に基づいて余白を決定する 列の数は固定されているため、異なる数値のリストの余白値を計算して、完全な左揃えを確保できます。 たとえば、各行に 4 つの要素があり、最後の行には 3 つの要素しかない場合、最後の要素の右余白のサイズが「リストの幅 + ギャップのサイズ」であれば、最後の 3 つの要素も完全に左揃えになります。 次に、ツリー構造擬似クラス数量マッチング技術(この記事「擬似クラスリストの数をマッチングしてWeChatグループアバターCSSレイアウトを実装する技術」のレイアウト技術はこの技術の助けを借りて実装されています)の助けを借りて、最後の行にいくつの要素があるかを知ることができます。 例えば:
この例では、1 行に 4 つの要素があるため、次の CSS 設定を使用できます。 。容器 { ディスプレイ: フレックス; /* 両端を揃える */ コンテンツの両端揃え: スペースの間; flex-wrap: ラップ; } .リスト{ 幅: 24%; 高さ: 100px; 背景色: スカイブルー; 上マージン: 15px; } /* 最後の行が3つの要素の場合 */ .list:最後の子:n番目の子(4n - 1) { 右マージン: calc(24% + 4% / 3); } /* 最後の行が2つの要素の場合 */ .list:最後の子:n番目の子(4n - 2) { 右マージン: calc(48% + 8% / 3); } 提示された現象は以下のとおりである 削除してもスタイルはそのまま残ります。私はこれに感心します。 方法3: 子要素の幅が固定されていない場合 対処が難しいですが、解決策はまだあり、プログラムはますます面白くなってきています。 (1)最後の項目、margin-right: auto; 。容器 { ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; flex-wrap: ラップ; } .リスト{ 背景色: スカイブルー; マージン: 10px; } /* 最後の項目 margin-right:auto */ .list:最後の子{ 右マージン: 自動; } (2)疑似要素を作成し、flex:autoまたはflex:1を設定する 。容器 { ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; flex-wrap: ラップ; } .リスト{ 背景色: スカイブルー; マージン: 10px; } /* 左揃えを補助するために疑似要素を使用する*/ .コンテナ::after { コンテンツ: ''; flex: auto; /* または flex: 1 */ } 4. 行数と列数が固定されていない場合 //HTML コード: <div class="コンテナ"> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <i></i><i></i><i></i><i></i><i></i><i></i><i></i>//div より 1 つ少ないです! </div> //CSS コード: 。容器 { ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; flex-wrap: ラップ; 右マージン: -10px; } .リスト{ 幅: 100px; 高さ: 100px; 背景色: スカイブルー; マージン: 15px 10px 0 0; } .コンテナ > i { 幅: 100ピクセル; 右マージン: 10px; } これで、CSS フレックス レイアウトのリストの最後の行を左揃えにする N の方法 (要約) に関するこの記事は終了です。CSS フレックス レイアウトのリストの最後の行を左揃えにする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: CentOS8 システムをベースにした Gitlab を構築するために Docker を使用する詳細なチュートリアル
>>: MySQLの主キーと外部キーの使用と説明を簡単に説明します
目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...
設計意図ページを開発する際には、ページ上のナビゲーション メニューをクリックしたときにページを対応す...
URL 書き換えは、Web サイトの優先ドメインを決定するのに役立ちます。同じリソース ページの複数...
導入メタタグは、HTML言語のHEAD領域にある補助タグです。 meta は、ページの説明、キーワー...
目次1. インストールの準備1. Linux関連情報の表示(Linuxコマンドライン操作) 2. M...
Baota PanelのPHP7.3バージョンがZipArchiveをサポートしていないため、プログ...
Docker の使用中に、いくつかの問題が発見されました。npm install や bundle ...
この記事では、Java接続MySQLの基礎となるカプセル化コードを参考までに紹介します。具体的な内容...
最近、IIS をサーバーとして使用すると、apk ファイルがサーバーにアップロードされましたが、ダウ...
序文ほとんどのプロジェクトでは、PDF ファイルのオンライン プレビューに遭遇するでしょう。このプロ...
ホストとコンテナ間でファイルを転送するには、コンテナの完全な ID が必要です。取得方法は以下の通り...
まとめ:以下のように、CSS で指定した行にマウスを置いたときに行全体の色を変更する方法を示します。...
構造とパフォーマンスの紹介HTML 構造、CSS 表現、JavaScript 動作。Web ページの...
<br />前回の記事:Webデザイン講座(7):Webページ制作の効率化1:必要な小言...
目次MySQL の current_timestamp の落とし穴エラーを報告する私の解決策mysq...