CSS フレックスレイアウトのリストの最後の行を左揃えにする N 通りの方法 (要約)

CSS フレックスレイアウトのリストの最後の行を左揃えにする N 通りの方法 (要約)

張新旭氏の記事を引用して皆さんにシェアしたいと思います。 変更を加えたい場合は、対応する画像によって生成されたリンクをクリックして変更してください。

問題の説明

//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レイアウトを実装する技術」のレイアウト技術はこの技術の助けを借りて実装されています)の助けを借りて、最後の行にいくつの要素があるかを知ることができます。

例えば:

  • .list:last-child:nth-child(4n - 1) は、最後の行に 3 つの要素または 7 つの要素があることを示します。
  • .list:last-child:nth-child(4n - 2) は、最後の行に 2 つの要素または 6 つの要素があることを示します...

この例では、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の主キーと外部キーの使用と説明を簡単に説明します

推薦する

React Native APPのアップデートに関する簡単な説明

目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...

階段効果を実現するためのWeChatアプレットカスタムメニューナビゲーション

設計意図ページを開発する際には、ページ上のナビゲーション メニューをクリックしたときにページを対応す...

Nginx URL 書き換えメカニズムの原理と使用例

URL 書き換えは、Web サイトの優先ドメインを決定するのに役立ちます。同じリソース ページの複数...

HTML メタの説明

導入メタタグは、HTML言語のHEAD領域にある補助タグです。 meta は、ページの説明、キーワー...

Linux (CentOS7) で RPM を使用して MySQL 8.0.11 をインストールするチュートリアル

目次1. インストールの準備1. Linux関連情報の表示(Linuxコマンドライン操作) 2. M...

BT Baota Panel php7.3 および php7.4 が ZipArchive をサポートしない問題の解決方法

Baota PanelのPHP7.3バージョンがZipArchiveをサポートしていないため、プログ...

Docker コンテナでネットワーク リクエストが遅くなる問題の解決策

Docker の使用中に、いくつかの問題が発見されました。npm install や bundle ...

MySQLへのJava接続の基礎となるカプセル化の詳細な説明

この記事では、Java接続MySQLの基礎となるカプセル化コードを参考までに紹介します。具体的な内容...

IIS サーバーから apk ファイルをダウンロードする際の 404 エラーの解決策

最近、IIS をサーバーとして使用すると、apk ファイルがサーバーにアップロードされましたが、ダウ...

Vue-pdfはPDFファイルのオンラインプレビューを実装します

序文ほとんどのプロジェクトでは、PDF ファイルのオンライン プレビューに遭遇するでしょう。このプロ...

Dockerコンテナとローカルマシン間でファイルを転送する方法

ホストとコンテナ間でファイルを転送するには、コンテナの完全な ID が必要です。取得方法は以下の通り...

CSSは、マウスを線の上に置くと線全体の色を変える効果を実現します。

まとめ:以下のように、CSS で指定した行にマウスを置いたときに行全体の色を変更する方法を示します。...

シンプルなウェブページレイアウトの構造と表現原理の共有

構造とパフォーマンスの紹介HTML 構造、CSS 表現、JavaScript 動作。Web ページの...

Webデザインチュートリアル(8):Webページの階層と空間デザイン

<br />前回の記事:Webデザイン講座(7):Webページ制作の効率化1:必要な小言...

MySQL の current_timestamp の落とし穴とその解決策を共有する

目次MySQL の current_timestamp の落とし穴エラーを報告する私の解決策mysq...