Flexbox で動的にレンダリングされたカードの一貫性のあるラッピングを強制するにはどうすればよいですか?

動的にレンダリングされたカードとフレックスボックス ラッピングの処理

このシナリオでは、特定の方法でラップする動的にレンダリングされたカードを含むレスポンシブなフレックスボックス ボックスがあります。これを実現する方法を詳しく見てみましょう。

フレックスボックスでの「ゴースト」要素の使用

望ましい動作を実現するには、通常のカードと一緒に「ゴースト」要素を使用する手法を使用できます。これらの「ゴースト」要素は、フレックスボックス コンテナの最後に追加される空の div です。これらの目的は、残りのスペースを視覚的に占有し、フレックスボックスのラッピング メカニズムをガイドすることです。

たとえば、列の長さを 4 にしたい場合は、「ゴースト」要素が 3 つ必要になります。これらの要素は通常のカードの幅と間隔を模倣し、最後の 2 枚のカードが左側から始まり均等に配置されるようにします。

「ゴースト」要素の組み込み

<div class="recipe-grid">

  <!-- Regular cards -->
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>

  <!-- "Ghost" elements -->
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>

</div>

スタイリング「ゴースト」要素に関する考慮事項

CSS では、「ゴースト」要素に次のものが含まれていることを確認してください。スタイリング:

.card:empty {
  width: 300px;  <!-- Same width as regular cards -->
  box-shadow: none;
  margin: 2rem;
  padding-bottom: 0;
}

擬似要素を使用した代替アプローチ

または、CSS 擬似要素を使用して「ゴースト」要素の効果を作成できます。この手法を使用すると、HTML での余分な div の使用を避けることができます。

.card:nth-child(n+5) {  <!-- Applies to all elements after the 4th child -->
  width: 300px;  <!-- Same width as regular cards -->
  box-shadow: none;
  margin: 2rem;
  padding-bottom: 0;
}

この手法では、4 番目のカードの後に​​空の「ゴースト」スペースが効果的に作成され、「ゴースト」要素のアプローチと同様の視覚的な結果が得られます。ただし、この手法はすべてのブラウザでサポートされているわけではないことに注意することが重要です。

以上がFlexbox で動的にレンダリングされたカードの一貫性のあるラッピングを強制するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。