为什么我的图像在flexbox中具有正确的空白边距？

Question

我制作了横幅并使用flexbox（第一次），但是图片后面有这么大的空白（我需要连续6张图片）。 我希望此横幅的宽度为100％，图片必须粘贴到边框上，但最后一张图片后始终必须有空白。 也许我可以关闭它？

 .header-small-cars { list-style-type: none; margin-top:30px; padding: 0; width:100%; display: flex; } .header-small-cars__item { flex-grow: 1; } .header-car:link { text-decoration: none; } .header-car__name { font-size: 14px; line-height: 20px; color: #000; font-weight: 400; margin: 0 0 -3px 0; } .header-car__name span { color: #e17838; font-size: 12px; line-height: 20px; } .header-car__img { height: 51px; } .header-car__img img{ width: auto; height: 51px; } .header-car__price { color: #e10025; font-size: 12px; line-height: 20px; } 

 <ul class="header-small-cars"> <li class="header-small-cars__item"> <a href="#" class="header-car"> <h3 class="header-car__name">Lala <span class="header-car__name--sale">manu</span></h3> <div class="header-car__img"><img src="http://i00.i.aliimg.com/photo/v0/690753888/HP_FG_006_Fixed_Gear_Bikes_Fixie.summ.jpg"> </div> <span class="header-car__price">1999s.</span> </a> </li> <li class="header-small-cars__item"> <a href="#" class="header-car"> <h3 class="header-car__name">Coco <span>Mala</span></h3> <div class="header-car__img"><img src="http://i00.i.aliimg.com/photo/v0/690753888/HP_FG_006_Fixed_Gear_Bikes_Fixie.summ.jpg"> </div> <span class="header-car__price">192882n.</span> </a> </li> 

Answer 1

flex容器中有两个flex项目。

您已将flex-grow: 1应用于两个项目：

.header-small-cars__item {
    flex-grow: 1;
}

这意味着容器中所有可用宽度均在两个弹性项目之间平均分配。

演示： http ： //jsfiddle.net/snbrae5z/3/

一旦添加了所有六个项目，空间将在所有项目之间平均分配（无需更改CSS）：

演示： http ： //jsfiddle.net/snbrae5z/4/

仅使用两个flex项，就可以删除flex-grow: 1并在flex容器中添加justify-content: space-between 。 space-between对齐第一项和最后一项在容器边缘：

演示： http ： //jsfiddle.net/snbrae5z/1/