CODEWITHSUNDEEP
htmlimagecssflexbox
Maxim Brkn
Maxim Brkn

Reputation: 105

Why does my image have right margin whitespace in flexbox?

I make a banner and using flexbox (for first time), but pictures has this big white space after them (I need 6 pics in a row). I want this banner to be 100% width and pics must glue to borders, but last pic always have that white space after it. Maybe I can turn it off?

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

Upvotes: 1

Views: 1415

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371143

You have two flex items in the flex container.

You've applied flex-grow: 1 to both items:

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

This means that all available width in the container is distributed evenly among both flex items.

Demo: http://jsfiddle.net/snbrae5z/3/

Once you add all six items, the space will be distributed evenly among all of them (with no changes to the CSS):

Demo: http://jsfiddle.net/snbrae5z/4/

With only two flex items, you can remove flex-grow: 1 and add justify-content: space-between to the flex container. space-between aligns first and last items to the container edges:

Demo: http://jsfiddle.net/snbrae5z/1/

Upvotes: 2

Related Questions