如何实现Flexbox图标hover放大时保持间距并让其他图标位移？

我想让Flexbox容器里的图标在hover放大时，其他图标自动位移以保持间距一致，但发现transform: scale()没法和Flexbox配合实现这个效果——hover放大后其他图标完全不动。我用React开发，请问该怎么实现？

预期效果：Flexbox项目自动位移，保持间距一致
实际问题：hover放大时，其他项目位置无变化

现有代码 #

CSS #

:root {
  --bg-color: rgb(20, 20, 20);
}

body {
  align-items: center;
  background-color: var(--bg-color);
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0px;
  padding: 0px;
}

#icons {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% -20px);
  gap: 70px;
  max-width: 1500px;
  white-space: nowrap
}

.icon {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  cursor: pointer;
  height: 150px;
  width: 150px;
  transition: transform 400ms cubic-bezier(.05, .43, .25, .95);
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20px;
}

#icons .icon:hover {
  transform: scale(1.5);
}

#icons .icon:not(:hover) {
  flex-grow: 1;
}

HTML #

<div class="group-icon" id="icons">
  <div class="icon">
    <img src="https://images.pexels.com/photos/2269872/pexels-photo-2269872.jpeg?auto=compress&cs=tinysrgb&w=1600">
  </div>

  <div class="icon">
    <img src="https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600">
  </div>

  <div class="icon">
    <img src="https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600">
  </div>
</div>

核心原因 #

transform: scale()只是视觉层面的缩放，不会改变元素在布局中的实际尺寸——Flexbox是根据元素的真实布局盒模型尺寸计算间距的，所以缩放后其他元素不会自动位移。要实现预期效果，得修改hover元素的实际宽高，或者通过容器的动态布局调整来触发位移。

方法一：纯CSS实现（无需React） #

放弃transform: scale()，直接修改元素的width和height来实现放大，同时给容器和子元素添加过渡动画保证平滑效果：

修改后的CSS：

:root {
  --bg-color: rgb(20, 20, 20);
  --icon-size: 150px;
  --hover-size: calc(var(--icon-size) * 1.5);
}

body {
  align-items: center;
  background-color: var(--bg-color);
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0;
  padding: 0;
}

#icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px;
  max-width: 1500px;
  width: calc(100% - 20px);
  /* 容器过渡，保证整体布局平滑变化 */
  transition: gap 400ms cubic-bezier(.05, .43, .25, .95);
}

.icon {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  cursor: pointer;
  height: var(--icon-size);
  width: var(--icon-size);
  /* 宽高变化的过渡动画 */
  transition: width 400ms cubic-bezier(.05, .43, .25, .95), height 400ms cubic-bezier(.05, .43, .25, .95);
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20px;
}

#icons .icon:hover {
  width: var(--hover-size);
  height: var(--hover-size);
}

说明 #

• 用CSS变量统一管理图标尺寸，方便后续修改
• 直接修改width和height改变元素实际布局尺寸，Flexbox会自动重新计算间距，其他元素自然位移
• 给容器和子元素都加过渡动画，避免布局跳变

方法二：React结合CSS实现（更灵活） #

如果需要更复杂的交互逻辑（比如多元素hover的特殊处理），可以用React状态控制每个图标的尺寸：

React组件示例 #

import { useState } from 'react';

const IconGrid = () => {
  const [hoveredIndex, setHoveredIndex] = useState(null);
  const baseIconSize = 150;
  const hoverScale = 1.5;

  const iconUrls = [
    "https://images.pexels.com/photos/2269872/pexels-photo-2269872.jpeg?auto=compress&cs=tinysrgb&w=1600",
    "https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600",
    "https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600"
  ];

  return (
    <div style={styles.pageContainer}>
      <div style={styles.iconGrid}>
        {iconUrls.map((url, index) => (
          <div
            key={index}
            style={{
              ...styles.icon,
              width: hoveredIndex === index ? baseIconSize * hoverScale : baseIconSize,
              height: hoveredIndex === index ? baseIconSize * hoverScale : baseIconSize
            }}
            onMouseEnter={() => setHoveredIndex(index)}
            onMouseLeave={() => setHoveredIndex(null)}
          >
            <img src={url} alt="icon" style={styles.iconImg} />
          </div>
        ))}
      </div>
    </div>
  );
};

const styles = {
  pageContainer: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgb(20,20,20)',
    height: '100vh',
    margin: 0,
    padding: 0
  },
  iconGrid: {
    display: 'flex',
    gap: '70px',
    maxWidth: '1500px',
    width: 'calc(100% - 20px)',
    transition: 'gap 400ms cubic-bezier(.05, .43, .25, .95)'
  },
  icon: {
    backgroundColor: 'rgba(255,255,255,0.1)',
    borderRadius: '20px',
    cursor: 'pointer',
    transition: 'width 400ms cubic-bezier(.05, .43, .25, .95), height 400ms cubic-bezier(.05, .43, .25, .95)'
  },
  iconImg: {
    width: '100%',
    height: '100%',
    objectFit: 'contain',
    borderRadius: '20px'
  }
};

export default IconGrid;

说明 #

• 用React状态hoveredIndex记录当前hover的图标索引
• 根据状态动态设置图标的宽高，Flexbox会自动调整整体布局
• 保留过渡动画，保证交互流畅无跳变

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