为什么我的图像有右边空白在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-grow: 1应用于两个项目:

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

这意味着容器中的所有可用宽度均匀地分布在两个伸缩项之间。

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

一旦你添加了所有六个项目，空间将均匀分布在它们之间(不改变CSS):

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

只有两个flex项目，您可以移除flex-grow: 1并将justify-content: space-between添加到flex容器中。space-between将第一项和最后一项对齐到容器边缘:

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