Question

红色边框围绕弹性项目。他们有

flex-grow: 1

这些项目包含在Flex容器中：

  width: 100%
  display: flex
  flex-direction: row
  align-items: flex-end

正如您所见，垂直对齐工作正常。

当我放入图像时，图像的宽度会推动弹性项目比它们应该更大或更小。图像的宽度会覆盖弹性项目的宽度。我想说的是：

首先使弹性项目的大小相同，然后将包含的图像（无论其自然大小）调整为其容器的大小（弹性项目）。我在图片上尝试了width: 100%和width: auto。没有帮助。

此图像显示等间距的弹性项目（红色边框）。我希望图像适合这些框，而不会导致框的宽度发生变化。如果我用表格单元格替换弹性项目，这就是我得到的行为。

这个小提琴显示3个相等的方框：https://jsfiddle.net/justinwyllie/zdrd89gu/

＆＃13;

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.flex-boxes {
  flex-grow: 1;
  border: 2px solid red;
}

＆＃13;

<div class="flex-container">
  <div class="flex-boxes">A</div>
  <div class="flex-boxes">B</div>
  <div class="flex-boxes">C</div>
</div>

＆＃13;

此图显示中间弹性项目中的图像。它完全弄乱了相同的盒子。问题是我需要做些什么才能使猫适合中间盒子？（适合宽度方向;我不介意高度）。

https://jsfiddle.net/justinwyllie/zdrd89gu/1/

＆＃13;

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.flex-boxes {
  flex-grow: 1;
  border: 2px solid red;
}

.cat {
  width: auto;
}

＆＃13;

<div class="flex-container">
  <div class="flex-boxes">A</div>
  <div class="flex-boxes">
    <img class="cat" src="http://www.publicdomainpictures.net/pictures/30000/velka/annoyed-cat.jpg" />
  </div>
  <div class="flex-boxes">C</div>
</div>

＆＃13;

Answer 1

flex-grow属性告诉flex项目容器中可用空间的大小。

在你的第二张图片中，空项目的宽度都相等，因为flex-grow: 1告诉他们在他们自己之间平均分配可用空间。

您在这些项目中添加的任何内容都会影响flex-grow，因为如上所述，flex-grow基于容器中的可用空间 - 而内容会消耗空间。

如果您希望项目保持固定宽度，请使用flex-basis。

所以而不是：

flex-grow: 1;

尝试：

flex: 0 0 20%; /* don't grow, don't shrink, fixed width at 20% */

如果您想要每行五件物品，那么20％只是一个例子。

以下是您修改后的代码：

jsFiddle

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.flex-boxes {
  /* flex-grow: 1;       <-- REMOVE */
  flex: 0 0 33.33%;      /*  NEW    */
  border: 2px solid red;
  /* box-sizing: border-box; you may need to add this property if
                             you enable wrapping */
}
.cat {
   width: auto;
   /* vertical-align: bottom; add this property if you want to remove
                              the small gap of whitespace underneath images
                              https://stackoverflow.com/a/31445364/3597276 */
 }

<div class="flex-container">
  <div class="flex-boxes">A</div>
  <div class="flex-boxes">
    <img class="cat" src="http://www.publicdomainpictures.net/pictures/30000/velka/annoyed-cat.jpg" />
  </div>
  <div class="flex-boxes">C</div>
</div>

在此处了解详情：

flex-grow not sizing flex items as expected

弹性项目中的图像导致相等的宽度中断

1 个答案: