BinaryDevelop
  1. ホーム
  2. html

[解決済み] フレックスアイテムをオーバーラップさせる

2022-02-19 04:07:59

質問

未知数のトランプを横一列に並べたいのですが、どうすればいいですか？ そのためには、数が多ければ重なるようにしなければならない。 フレックスボックスで、トランプを縮小せずに重ねることができないので困っています。 下の例では、カードが縮小されています。 試しに flex-shrink: 0 が、その後 max-width は尊重されなかった。 

.cards {
  display: flex;
  max-width: 300px;
}

.card {
  width: 50px;
  height: 90px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(255, 0, 0, 0.4);
}

<div class='cards'>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
</div>

解決方法は？

フレックスボックスを使った方法はこうだ。 

.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;
}

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

技術的に言えば、カードは重なっているわけではなく、切り取られているだけであることに注意してください。しかし、それらは 見える 重なっているように見えます。コツは、各カードをoverflow: hiddenで別の要素で囲むことです。

ラッピングされた要素は、空きスペースに合わせて縮小され、そのスペースに可能な限り多くのカードが表示されます。

hoverルールは、スタックの真ん中にあるカードを完全に表示する方法を示すために入れています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します