为什么我的图片在 flexbox 中有右边距空白？答案

【问题标题】：Why does my image have right margin whitespace in flexbox?为什么我的图片在 flexbox 中有右边距空白？
【发布时间】：2016-01-23 23:12:17
【问题描述】：

我制作了一个横幅并使用了 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>

【问题讨论】：

您在寻找这样的东西吗？ jsfiddle.net/snbrae5z/1
好的，非常感谢！

标签： html image css flexbox

【解决方案1】：

弹性容器中有两个弹性项目。

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

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

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

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

添加所有六个项目后，空间将在所有项目之间平均分配（不更改 CSS）：

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

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

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

【讨论】：