Html flex项目中的图像导致等宽中断

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

flex-grow: 1 

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

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

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

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

首先使flex项目的大小相同，然后将包含的图像（无论其自然大小）调整为其容器（flex项目）的大小。我在图像上尝试了

width:100%

和

width:auto

。没有帮助

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

此小提琴显示3个相等的方框：

.flex容器{
显示器：flex；
弯曲方向：行；
对齐项目：柔性端；
}
.软盒{
柔性生长：1；
边框：2倍纯红；
}

A.
B
C

flex-grow属性告诉flex-items容器中要消耗多少可用空间

在第二幅图中，空项的宽度都相等，因为

flex-grow:1

告诉它们在它们之间平均分配可用空间

您放在这些项目中的任何内容都将影响

flex-grow

，因为如上所述，

flex-grow

基于容器中的可用空间，而内容消耗空间

如果希望项目保持固定宽度，请使用

flex basis

因此，不是：

flex-grow: 1;

尝试：

如果您希望每行有五个项目，那么20%只是一个示例

这是您修改后的代码：

.flex容器{
显示器：flex；
弯曲方向：行；
对齐项目：柔性端；
}
.软盒{
/*柔性生长：1；
flex: 0 0 20%; /* don't grow, don't shrink, fixed width at 20% */