弹性项目不会随着 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 的明显概念，但我所有的谷歌搜索都是徒劳的。 任何答案、方向或学习网站建议将不胜感激。

Answer 1

这个谜题少了两块。

1. 您将列宽设置为flex-grow: 1 。 这意味着flex-basis仍处于其默认值auto （基于内容）。 所以列的大小是基于图像大小的。 您可以添加flex-basis: 0 ，或者只使用flex: 1 。

   完整说明：根据原始大小制作 flex-grow 展开项目

---

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

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

 .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>