張新旭氏の記事を引用して皆さんにシェアしたいと思います。 変更を加えたい場合は、対応する画像によって生成されたリンクをクリックして変更してください。 問題の説明 //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の主キーと外部キーの使用と説明を簡単に説明します
この記事では、参考までにVueのファイルのアップロードとダウンロードの具体的なコードを紹介します。具...
MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...
MySQL が挿入などの操作を実行するときにコミットする必要があるかどうかは、ストレージ エンジン...
目次クイックスタート使い方基本原則Vue2.x はコンポーネント通信に EventBus を使用しま...
Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...
1. コンポーネントをインストールする yum install epel-rpm-macros.no...
この記事では、ボトムクエリ機能を実装するためのVueの具体的なコードを例として紹介します。具体的な内...
仕事の都合上、最近 HTML を PDF に変換する機能について調べることに時間を費やしました。 H...
ご存知のとおり、cd コマンドがないと、Linux でディレクトリを切り替えることはできません。それ...
この記事では、ユーザーのログイン切り替えを実現するためのVueの具体的なコードを例として紹介します。...
この記事では主に、Vue でシンプルな無限ループスクロールアニメーションを実装し、みんなで共有する例...
最近、Linux オペレーティング システムを使用して実行可能ファイルを実行していたところ、「そのよ...
序文比較的複雑な大規模システムでは、複雑なロジックで処理する必要があるオブジェクトまたはデータ フロ...
テキスト入力でプレースホルダーを使用していますが、問題なく動作します。しかし、選択ボックスにはプレー...
序文通常、h5 ページを作成するときは、WeChat、QQ、Weibo などのエコシステム内でトラフ...