css 如何使flexbox项目移动时,增长一个div(悬停)

eh57zj3b  于 2023-10-21  发布在  其他
关注(0)|答案(3)|浏览(142)

所以我希望图标移动以保持差距不变,当图标在悬停时增长时,但正如它所显示的那样,transform不适用于flexbox。我应该怎么做才能实现这个功能?如果需要,我可以在React中编写代码。
期望移动flexbox项以保持间距不变。
项目未更改位置

: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;
}
<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>
xa9qqrwz

xa9qqrwz1#

我不确定我是否完全理解你的问题,但从我所读到的,我认为你想增加图像,但保持图标之间的差距相同。不管你是否使用flexboxes。您可以在图像 Package 器上添加overflow: hidden,而不是scaling, Package 器会在 Package 器内放大图像。希望这对你有帮助。

: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);
  overflow: hidden;
}

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

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

#icons .icon:not(:hover) {
  flex-grow: 1;
}
<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>
qjp7pelc

qjp7pelc2#

与其使用transform属性,我认为您需要使用widthheight声明特定的维度。

#icons .icon:hover {
  /* transform: scale(1.5); */
  width: 225px;
  height: 225px;
}

您可能还需要为Flexbox容器声明align-items: center
此外,您的宽度计算无效(因此被忽略),因为在减号-字符之后没有空格。而不是“100%负20像素”,你有“100%负20像素”。然而,“100% -20 px”会引入其他问题,所以我不会在我的回答中使用它。

#icons {
  align-items: center;
  width: calc(100% - 20px);
}
: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;
  align-items: center;
  width: calc(100% -20px); /* invalid */
  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); */
  width: 225px;
  height: 225px;
}

#icons .icon:not(:hover) {
  flex-grow: 1;
}
<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>
zf9nrax1

zf9nrax13#

问题是transform只在视觉上改变事物,而不是大小。
因此,此代码段更改悬停时的实际宽度和高度并转换它们。
它还将图像向上平移高度差的一半,但如果有多行图像,您必须决定这是否是您想要的效果,因为它不会上下移动行。

: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: all 400ms cubic-bezier(.05, .43, .25, .95);
}

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

#icons .icon:hover {
  Rtransform: scale(1.5);
  width: 225px;
  height: 225px;
  transform: translateY(-37.5px);
}

#icons .icon:not(:hover) {
  flex-grow: 1;
}
<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>

相关问题