防止重叠

Question

我创建了纸牌布局。每当用户将鼠标悬停在一张卡上时，该卡就会缩放（使用React-Spring）。

我面临的问题是，当缩放特定的卡片时，他将与其他卡片重叠（见图）。

我试图通过使用填充来解决此问题，但这仅适用于小屏幕（移动设备等）。

如何设置此效果的样式，因此对于任何屏幕类型，结果都是相同的而不会重叠？

card: {
    borderRadius: '12px',
    border: '1.5px solid',
    borderColor: 'aliceblue',
},

    return (
        <Spring
            to={{
                transform: `scale(${this.state.isHovered ? 1.1 : 1})`,
                boxShadow: this.state.isHovered ? 'translate3d(0px, 2px, 0px) scale(1)' : 'translate3d(0px, 0px, 0px) scale(1)',
             //   padding: this.state.isHovered ? '5px' : '0px',
            }}>
            {scale => (
                <div style={scale} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
                    <Card
                        style={{ ...styles.card, borderColor: _borderColor }}
                        >
                        <CardHeader ...

谢谢

Answer 1

尝试向卡组件添加边距。

card:{
    ...
    margin: '1px';
}

Answer 2

使用Flex显示和一个justify-content属性：

display: flex;
justify-content: space-around;