重複するフレックス アイテムの作成

利用可能な幅を超える可能性のあるフレックス アイテムの水平方向の行を作成する場合、多くの場合、それらを重複させることが望ましいです。 。デフォルトでは、フレックスボックスはコンテナに合わせて項目を縮小します。

フレックスボックスのアプローチ

重複を実現するには、次のアプローチを利用できます:

overflow: visible;

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;

• 各フレックス項目を .cardWrapper div でラップします。
• デフォルトでは、.cardWrapper に overflow: hidden が設定されます。これにより、子 .card からのオーバーフローが非表示になります。
• 最後の項目またはホバーされた項目にオーバーフローが表示されるようにするには、:last-child または :hover を使用します。
• .card 項目を次のように設定します。縮小を防ぐため、固定幅と最小幅が設定されています。
• overflow: hidden を使用して .card アイテムからのオーバーフローを非表示にします。