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: 子要素の幅が固定されていない場合

対処が難しいですが、解決策はまだあり、プログラムはますます面白くなってきています。
このとき、幅が固定されておらず、幅に基づいてマージン値を計算することができないため、上記の方法を使用するのがより困難になります。

（１）最後の項目、margin-right: auto;

。容器 {
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
    flex-wrap: ラップ;
}
.リスト{
    背景色: スカイブルー;
    マージン: 10px;
}
/* 最後の項目 margin-right:auto */
.list:最後の子{
    右マージン: 自動;
}

（２）疑似要素を作成し、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の主キーと外部キーの使用と説明を簡単に説明します