Flexbox で重複するトランプを作成するには?

重複するフレックス項目

Web 開発では、フレックスボックスを使用して重複する要素を作成するのが難しい場合があります。この記事では、一連のトランプを水平方向に表示するソリューションを紹介します。この場合、カードの数が利用可能なスペースを超える場合、カードが重なり合います。

これを実現するには、最大幅のフレックスボックス コンテナーが作成されます。秘訣は、最初は隠されたオーバーフローを持つ cardWrapper 要素の使用にあります。マウスを移動するか、シリーズの最後のカードになると、オーバーフローが表示され、カードを次のカードに重ねることができます。

更新されたコードは次のとおりです:

<code class="css">.cards {
  display: flex;
  align-content: center;
  max-width: 35em;
}

.cardWrapper {
  overflow: hidden;
}

.cardWrapper:last-child, .cardWrapper:hover {
    overflow: visible;
}

.card {
    width: 10em;
    min-width: 10em;
    height: 6em;
    border-radius: 0.5em;
    border: solid #666 1px;
    background-color: #ccc;
    padding: 0.25em;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}</code>

この解決策カードが縮むのを防ぎ、必要に応じてカードを重ねることができます。カードをコンテナの端に合わせて、カードの数が増えたらクリップします。

以上がFlexbox で重複するトランプを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。