如何實現重疊的 Flex 項目：克服收縮元素並實現優雅的重疊？-css教學-PHP中文網

如何實現重疊的 Flex 項目：克服收縮元素並實現優雅的重疊？

Barbara Streisand

發布： 2024-10-31 11:47:02

原創

345 人瀏覽過

How to Achieve Overlapping Flex Items: Overcoming Shrinking Elements and Implementing Graceful Overlaps?

重疊 Flex 項目

使用 Flexbox 創建一系列水平重疊的元素可能具有挑戰性，因為它可能會導致元素尺寸縮小。讓我們深入研究這個問題並探索解決方案。

下面提供的範例示範了該問題：

<code class="css">.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);
}</code>

登入後複製

<code class="html"><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></code>

登入後複製

在此範例中，卡片縮小以適應最大寬度的約束，導致不希望的結果。為了解決這個問題，讓我們採用修改後的方法：

<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）。包裝器充當容器並控制其內容的溢出行為。預設情況下，包裝器是隱藏的，但最後一個包裝器和懸停在其上的任何包裝器都會變得可見，從而允許卡片在必要時重疊。這種方法可確保卡片保持所需的尺寸並優雅地重疊。

以上是如何實現重疊的 Flex 項目：克服收縮元素並實現優雅的重疊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！