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

Question

我做了一个横幅并使用了 flexbox（第一次），但是图片后面有这么大的白色 space（我需要连续 6 张图片）。我希望此横幅的宽度为 100%，并且图片必须粘在边框上，但最后一张图片后面总是有白色 space。也许我可以关掉它？

.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/

添加所有六个项目后，space 将平均分配给所有项目（CSS 没有变化）：

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

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

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

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

Why does my image have right margin whitespace in flexbox?

html

css

image

flexbox