Html 使弹性项目重叠

我想展示一系列未知数量的扑克牌。要做到这一点，如果数量过多，它们将不得不重叠。我很难说服flex box在不缩小卡片的情况下重叠卡片。下面的示例缩小了卡片。我尝试了

flex-shrink:0

，但没有遵守

max-width

.cards{
显示器：flex；
最大宽度：300px；
}
.卡片{
宽度：50px；
高度：90px；
边框：1px纯黑；
边界半径：3px；
背景色：rgba（255,0,0,0.4）；
}

---

柔性容器设计用于沿X轴和Y轴对齐项目

您正在询问沿Z轴对齐的问题

Flexbox不是为z轴对齐（重叠）而设计的

任何重叠都必须来自负边距、绝对位置、CSS网格布局、JavaScript或其他内容。

z-index

属性也可能需要发挥作用

下面是一个使用CSS网格的基本示例：

.cards{
显示：网格；
网格模板列：重复（30，10px）；
网格模板行：90px；
最大宽度：300px；
}
.卡片{
网格行开始：1；
背景颜色：浅绿色；
边框：1px纯黑；
}
.card:n个子（1）{网格列：1/6；}
.card:n子（2）{网格列：4/9；}
.card:n子（3）{网格列：7/12；}
.card:n子（4）{网格列：10/15；}
.card:nth child（5）{网格列：13/18；}
.card:n子（6）{网格列：16/21；}
.card:n子（7）{网格列：19/24；}
.card:nth child（8）{网格列：22/27；}
.card:nth child（9）{网格列：25/30；}

1.
2.
3.
4.
5.
6.
7.
8.
9

您可以使用

transform:translateX（-10px）

使flex布局中的元素重叠，但这无法解决您试图获得的布局。我不认为你能在flexbox中做到这一点。但是你可以用JS轻松地做到这一点

var parentEl=document.getElementById（“卡片”）；
函数sortCards（）{
var cards=document.getElementsByClassName（“卡片”），
cw=parentEl.clientWidth，
sw=父项。滚动宽度，
差异=西南-连续波，
偏移量=差异/（卡长度-1）；
对于（变量i=1；i
.cards{
显示器：flex；
最大宽度：300px；
}
.卡片{
高度：90px；
边框：1px纯黑；
边界半径：3px；
背景色：rgba（255,0,0,0.4）；
flex:050px；
背景：红色；
转变：转变.25s；
}
addcards
您可以使用margin属性执行此操作，并通过手动或JS应用于所需的项目


.cards{
显示器：flex；
最大宽度：300px；
}
上{
左边距：-10px；
}
.卡片{
宽度：50px；
高度：90px；
边框：1px纯黑；
边界半径：3px；
背景色：rgba（255,0,0,0.4）；
}
我提出了一个基于CSS的通用解决方案。但是，有几点需要注意：

最后一张卡溢出
.cards
容器
需要
.card
的子元素来产生重叠效果

.cards{
显示器：flex；
最大宽度：300px；
}
.卡片{
位置：相对位置；
弹性基准：50px；
高度：90px；
}
.卡：：以前{
内容：''；
显示：块；
位置：绝对位置；
宽度：50px；
身高：100%；
边框：1px纯黑；
边界半径：3px；
背景色：rgba（255,0,0,0.4）；
框大小：边框框；
}
以下是我如何使用flexbox实现这一点


.cards{
显示器：flex；
对齐内容：居中对齐；
最大宽度：35em；
}
.cardWrapper{
溢出：隐藏；
}
.cardWrapper:最后一个子项.cardWrapper:悬停{
溢出：可见；
}
.卡片{
宽度：10em；
最小宽度：10em；
身高：6em；
边界半径：0.5em；
边框：实心#666 1px；
背景色：#ccc；
填充：0.25em；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}

第一张牌什么的
第二张牌什么的
第三张牌什么的
第四张牌什么的
第五张牌什么的
您可以通过使用网格而不是flex，仅使用css来实现


.hand{
宽度：50%；
左边距：自动；
右边距：自动；
证明内容：中心；
显示：网格；
网格模板列：重复（自动拟合，最小值（10px，最大内容））；
}
.卡片{
宽度：3em；
高度：2.4em；
填充：3倍；
保证金：2倍；
背景颜色：浅绿色；
边框样式：实心；
变换：旋转（3deg）；/*使重叠更容易看到*/
}

卡片
卡片
卡片
卡片
卡片
卡片
卡片
卡片

div.card-area
{
高度：16vh；/*任意*/
显示器：flex；
}
div.card-area>div
{
弹性：100；
溢出x：隐藏；
}
div.card-area>div：类型的最后一个
{
flex:0自动；
}
分区卡区img
{
身高：100%；
}
这将使右子项与左子项重叠，不包括第一个

.overlapped {
  > * + * {
    postion: absolute;
    margin-left: -7px;
  }
}

您的容器还应具有flex和flex direction行。
派对迟到，但这是我对类似情况的修复：

有一个建议提到了负的边距，并且当没有其他的调整完成时，卡片总是与：
marginleft:-30px重叠（重叠宽度的选择有些随意。您可以选择卡的最大宽度。）

我在这里所做的更改是添加
justify content:space-equality