如何实现重叠的 Flex 项目：克服收缩元素并实现优雅的重叠？-css教程-PHP中文网

如何实现重叠的 Flex 项目：克服收缩元素并实现优雅的重叠？

Barbara Streisand

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

原创

298 人浏览过

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中文网其他相关文章！