如何在水平行中建立重疊的 Flex 項目？-css教學-PHP中文網

如何在水平行中建立重疊的 Flex 項目？

Barbara Streisand

發布： 2024-10-29 09:03:02

原創

768 人瀏覽過

How to Create Overlapping Flex Items in a Horizontal Row?

當建立重疊的 Flex 項目

建立可能超出可用寬度的水平行 Flex 項目時，通常需要讓它們重疊。預設情況下，Flexbox 會縮小項目以適合容器。

Flexbox 方法

為了實現重疊，我們可以使用以下方法：

.cards {<br> 顯示：flex;<br> 對齊內容：中心;<br> max-寬度：35em;<br>}</p><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;

登入後複製

}

.card {

將每個Flex 項目包裝在.cardWrapper div 中。

預設情況下，將 .cardWrapper 設定為溢位：隱藏。這將隱藏子 .card 中的任何溢出。

使用 :last-child 或 :hover 允許最後一個項目或懸停的項目顯示其溢位。

將 .card 項目設定為有固定寬度和最小寬度，以防止它們縮小。使用溢位：隱藏隱藏 .card 項目中的任何溢位。

以上是如何在水平行中建立重疊的 Flex 項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！