网页右侧Block hover时带动其他块移位问题求解决方案

问题根源：

• 当前.container使用justify-content: space-between布局，左右.column未设置固定宽度，当右侧Block hover时，margin-left: 50px与宽度增加会导致整个right column的宽度变化，触发space-between重新分配空间，进而带动左侧块移位。
• 直接修改margin会改变元素盒模型布局，影响周围元素的位置。

修复方案：

• 给左右.column设置固定宽度，确保其布局空间不受内部Block变化影响
• 用transform: translateX()替代margin调整Block位置，transform仅改变视觉位置，不会干扰布局流

修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>Website</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            height: 100vh;
            padding: 0 20px;
        }
        .column {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 170px;
            flex-shrink: 0;
        }
        .block {
            width: 100px;
            height: 100px;
            margin: 10px;
            text-align: center;
            line-height: 100px;
            transition: all 0.5s;
            background-color: lightgreen;
            align-self: center;
        }
        .block:hover {
            width: 150px;
        }
        .left .block:hover {
            transform: translateX(50px);
        }
        .right .block:hover {
            transform: translateX(-50px);
        }
        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="background">
        <!-- background -->
    </div>
    <div class="container">
        <div class="column left">
            <div class="block">Block 1</div>
            <div class="block">Block 2</div>
            <div class="block">Block 3</div>
        </div>
        <div class="column right">
            <div class="block">Block 4</div>
            <div class="block">Block 5</div>
            <div class="block">Block 6</div>
        </div>
    </div>
</body>
</html>

关键修改说明：

1. .column添加width: 170px和flex-shrink:0，固定列宽，避免内部元素变化影响整体布局
2. 用transform: translateX()替换margin调整位置，既实现向中间展开的视觉效果，又不会改变布局流
3. 给.block添加align-self: center，确保Block在列内居中，hover时平移更自然

内容的提问来源于stack exchange，提问作者nilsesen