水平方向の行に重複する Flex アイテムを作成するにはどうすればよいですか?

重複する Flex アイテムの作成

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

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

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

.cards {<br> display: flex;<br> align-content: center;<br> max- width: 35em;<br>}</p>
<p>.cardWrapper {<br> オーバーフロー: hidden;<br>}</p>
<p>.cardWrapper:last-child, .cardWrapper:hover {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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;

}

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

以上が水平方向の行に重複する Flex アイテムを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。