如何在水平行中创建重叠的 Flex 项目？

创建重叠的 Flex 项目

创建可能超出可用宽度的水平行 Flex 项目时，通常需要让它们重叠。默认情况下，Flexbox 会缩小项目以适合容器。

Flexbox 方法

为了实现重叠，我们可以使用以下方法：

.cards {<br> 显示：flex;<br> 对齐内容：中心;<br> max-宽度：35em;<br>}<p>.cardWrapper {<br>溢出：隐藏;<br>}</p>
<p>.cardWrapper:last-child, .cardWrapper:hover {</p>
<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;

}

• 将每个 Flex 项目包装在 .cardWrapper div 中。
• 默认情况下，将 .cardWrapper 设置为溢出：隐藏。这将隐藏子 .card 中的任何溢出。
• 使用 :last-child 或 :hover 允许最后一个项目或悬停的项目显示其溢出。
• 将 .card 项目设置为有固定宽度和最小宽度，以防止它们缩小。
• 使用溢出：隐藏隐藏 .card 项目中的任何溢出。