Flexbox Wrap を使用するときに最後の Flex アイテムが中央揃えにならないようにするにはどうすればよいですか?

フレックスボックスのラップを変更する方法

このレスポンシブなフレックスボックスのシナリオでは、画面サイズが小さくなるにつれて、フレックス項目が段階的にラップされます。ラッピング動作を微調整するために、左から順に、最後の flex アイテムを中央からずらして維持する方法を検討します。

ゴースト要素の実装:

CSS は次のことができます。最後の行の残りのスペースを占める「ゴースト」要素を作成するために使用されます。たとえば、潜在的な列長が 4 であると仮定すると、3 つのゴースト要素が必要になります:

.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

擬似要素:

擬似要素も使用でき、削減2 で必要なゴースト要素の数:

::after {
    content: "";
    flex: 1;
}

編集済み例:

これらのゴースト要素が追加されたコードの更新バージョンは次のとおりです:

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

これらの機能強化により、フレックス項目は最後の 2 つの項目で希望どおりにラップされます。中央から外れて左から始まります。

以上がFlexbox Wrap を使用するときに最後の Flex アイテムが中央揃えにならないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。