フレックス アイテムの重複

問題

不明な数のトランプのセットを水平方向に表示すると、一定の幅を超えるとそれらが重なってしまう可能性があります。この目的にはフレックス ボックスを使用できますが、サイズと重なりの制御は難しい場合があります。

解決策

この解決策には、目的の効果を達成するために特定の CSS プロパティを設定することが含まれます。内訳は次のとおりです:

• コンテナ: .cards コンテナはフレックスボックス (表示: flex) を使用し、カードが確実に収まるように最大幅 (max-width: 35em) を設定します。
• オーバーフロー コントロール: .cardWrapper 要素は各カードをラップし、そのオーバーフローを制御するために使用されます。 overflow: hidden プロパティは、最初はオーバーフローしているカードを非表示にします。
• ホバーと最後の子:cardWrapper の上にカーソルを置くとき、または最後の子の場合、overflow:visible プロパティが適用されて、溢れ出るカードが見えるようになる。これにより、常に関連するカードのみが表示されるようになります。
• カード スタイル: .card 要素には、縮小しないように固定幅と最小幅 (10em) が設定されています。高さ、枠線、背景色は必要に応じてカスタマイズできます。