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

推薦する

Vueはファイルのアップロードとダウンロードを実装します

この記事では、参考までにVueのファイルのアップロードとダウンロードの具体的なコードを紹介します。具...

MySQL パフォーマンス最適化のヒント

MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...

MySql はコミットする必要がありますか?

MySQL が挿入などの操作を実行するときにコミットする必要があるかどうかは、ストレージ エンジン...

Vue3.xはコンポーネント通信にmitt.jsを使用します

目次クイックスタート使い方基本原則Vue2.x はコンポーネント通信に EventBus を使用しま...

Alibaba Cloud イメージリポジトリを使用して外部 Docker イメージを構築する方法の詳細な説明

Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...

cobbler ベースの Linux システムを自動的にインストールする

1. コンポーネントをインストールする yum install epel-rpm-macros.no...

Vueはボトムクエリ関数を実装します

この記事では、ボトムクエリ機能を実装するためのVueの具体的なコードを例として紹介します。具体的な内...

HTML から PDF への変換事例の概要 (複数の画像を推奨)

仕事の都合上、最近 HTML を PDF に変換する機能について調べることに時間を費やしました。 H...

CD コマンドを使わずに Linux でディレクトリ/フォルダに入る方法

ご存知のとおり、cd コマンドがないと、Linux でディレクトリを切り替えることはできません。それ...

Vueはユーザーログイン切り替えを実装します

この記事では、ユーザーのログイン切り替えを実現するためのVueの具体的なコードを例として紹介します。...

Vue でシンプルな無限ループスクロールアニメーションを実装する例

この記事では主に、Vue でシンプルな無限ループスクロールアニメーションを実装し、みんなで共有する例...

Linux で実行可能ファイルを実行するときに「そのようなファイルまたはディレクトリはありません」というプロンプトが表示される場合の解決策

最近、Linux オペレーティング システムを使用して実行可能ファイルを実行していたところ、「そのよ...

Tomcat パイプライン モードのパイプラインとバルブの詳細な説明

序文比較的複雑な大規模システムでは、複雑なロジックで処理する必要があるオブジェクトまたはデータ フロ...

HTML 選択ボックスのプレースホルダーの作成に関する問題

テキスト入力でプレースホルダーを使用していますが、問題なく動作します。しかし、選択ボックスにはプレー...

JavaScript を使用して userAgent を通じていくつかの一般的なブラウザを判別する方法

序文通常、h5 ページを作成するときは、WeChat、QQ、Weibo などのエコシステム内でトラフ...