html - flex 项目不使用 flex-grow 扩展或收缩

Question

我正在尝试创建一种效果，其中图像的多个垂直部分并排放置，并且当您将鼠标悬停在图像上时，容器会增长，而其他容器会缩小以“显示”完整图像。我希望图像的唯一缩放是当它完全“显示”时它适合浏览器窗口。

这是此效果的片段，没有任何图像：

* {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.row {
  flex-basis: 0;
  display: flex;
  flex-direction: row;
}

.column {
  flex-grow: 1;
  border: 2px solid #000;
  transition: all 300ms ease-in-out;
}

.column:hover {
  flex-grow: 4.3;
}

<div class="row">
  <div class="column">
  </div>
  <div class="column">
  </div>
  <div class="column">
  </div>
</div>

但是现在，如果我保持一切不变，并在“列”div 中简单地添加 img 标签，那么任何收缩或增长都会完全停止。

* {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.row {
  flex-basis: 0;
  display: flex;
  flex-direction: row;
}

.column {
  flex-grow: 1;
  border: 2px solid #000;
  transition: all 300ms ease-in-out;
}

.column:hover {
  flex-grow: 4.3;
}

<div class="row">
  <div class="column">
    <img src="https://images.pexels.com/photos/2194261/pexels-photo-2194261.jpeg" />
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/1276553/pexels-photo-1276553.jpeg" />
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/774731/pexels-photo-774731.jpeg" />
  </div>
</div>

我是 CSS 新手，所以我确定我只是不熟悉一些关于 flexbox 的明显概念，但我所有的谷歌搜索都是徒劳的。任何答案、方向或学习网站推荐将不胜感激。

标签： htmlcssimageflexboxcss-animations

Answer 1

这个谜题中缺少两块。

1. 您将列宽设置为flex-grow: 1。这意味着它flex-basis仍然是默认值，auto（基于内容）。因此，该列的大小取决于图像大小。您可以添加flex-basis: 0，也可以只使用flex: 1.

   完整解释：根据原始大小使 flex-grow 扩展项目

---

2. 默认情况下，Flex 项目不能缩小到其内容的大小以下。它们的初始设置是min-width: auto。您需要使用 覆盖此默认值min-width: 0。

   完整解释：为什么弹性项目不缩小超过内容大小？

.row {
  display: flex;
  height: 100vh;
}

.column {
  min-width: 0; /* new */
  flex: 1;      /* adjustment */
  border: 2px solid #000;
  transition: all 300ms ease-in-out;
}

.column:hover {
  flex-grow: 4.3;
}

body {
  margin: 0;
}

<div class="row">
  <div class="column">
    <img src="https://images.pexels.com/photos/2194261/pexels-photo-2194261.jpeg">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/1276553/pexels-photo-1276553.jpeg">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/774731/pexels-photo-774731.jpeg">
  </div>
</div>