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

Posted 2023-03-05

【中文标题】flex 项目不使用 flex-grow 扩展或收缩

【英文标题】：flex items not expanding or shrinking with flex-grow

【发布时间】：2020-04-24 12:55:05

【问题描述】：

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

这里是这个效果的一个片段，没有任何图像：

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

【参考方案1】：

这个谜题缺少两块。

您已将列宽设置为flex-grow: 1。这意味着flex-basis 仍为其默认值auto（基于内容）。因此，该列的大小取决于图像大小。您可以添加flex-basis: 0，或者直接使用flex: 1。

完整解释：Make flex-grow expand items based on their original size

---

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

完整解释：Why don't flex items shrink past content size?

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