最終行での奇数のフレックスボックスの折り返しを制御するにはどうすればよいですか?

フレックスボックスの折り返し動作を制御する方法

問題

レスポンシブなフレックスボックス レイアウトを作成するときに、最後のいくつかの項目が奇妙に折り返される場合があります。前の行に過剰なスペースを残します。たとえば、API 呼び出しに基づいて動的にレンダリングされるカードのグリッドでは、最後の 2 枚のカードを左側から折り返して、中央揃えではなく前のカードと確実に揃えるようにしたいとします。

解決策

CSS を使用してフレックスボックスのラッピング動作を変更して、希望の配置を実現できます。一般的な 2 つのアプローチは次のとおりです。

「ゴースト」要素の使用

コンテンツが表示されない「ゴースト」要素を作成します。これらの要素は最終行を効果的に埋めて、後続のカードを次の行に押し出します。 「ゴースト」要素の数は、意図した列の長さに対応します。

たとえば、潜在的な列の長さが 4 の場合、3 つの「ゴースト」要素が必要になります。 CSS の使用:

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

::after 擬似要素の使用

または、CSS 擬似要素 ::after を使用します。このアプローチにより、必要な「ゴースト」要素の数が減ります。

.card::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: transparent;
}

この疑似要素はプレースホルダーとして機能し、最後の行の残りのスペースを埋めます。

次のいずれかを実装することにより、これらのテクニックを使用すると、フレックスボックス レイアウトの折り返し動作を調整して、画面サイズやレンダリングされたカードの数に関係なく、最後の項目が適切に配置されるようにすることができます。

以上が最終行での奇数のフレックスボックスの折り返しを制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。