水平シリーズで重複するフレックス項目を実現するにはどうすればよいですか?

フレックス アイテムをオーバーラップさせる方法?

チャレンジ:
指定された幅に収まらないほど多すぎます。

解決策:

Flexbox を使用すると、オーバーフロー制御されたコンテナーでカードをラップすることで、重複するカードを作成できます:

<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>

<code class="html"><div class="cards">
  <div class="cardWrapper">
    <div class="card">card 1 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 2 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 3 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 4 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 5 blah blah blah</div>
  </div>
</div></code>

説明:

• 最後のものとホバー上のものを除き、各 .cardWrapper に overflow: hidden を設定します。これにより、最後のカードを除くすべてのカードがコンテナーの下に隠されます。
• min-width は、カードが狭くなりすぎて消えるのを防ぎます。
• align-content: center は、コンテナー内でカードを垂直方向に揃えます。

以上が水平シリーズで重複するフレックス項目を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。