為什么我的圖像在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/