margin with flex wrap

Question

I am trying to add some spacing between the divs using display: flex and flex-wrap: wrap .

The problem is that when I apply margin-right to the second item, the row breaks. How can I add some spacing between the items without breaking them in 2 rows?

jsFiddle

 * { box-sizing: border-box; } // Default // ---------------------------------------------------- .collage { position: relative; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-bottom: 32px; } .collage-item { width: 100%; height: 25vw; background: url("https://www.audi.co.uk/content/dam/audi/production/Models/NewModelsgallery/A5range/A5_Coupe/MY17/1920x1080_A5-Coupe-2016-side.jpg") no-repeat; background-size: cover; flex: 0 0 50%; &: nth-child(1) { margin-bottom: 16px; } &:nth-child(2) { margin-right: 16px; } &:nth-child(4) { margin-top: 16px; } &:nth-child(1), &:nth-child(4) { flex: 0 0 100%; height: 50vw; } } // Button // ---------------------------------------------------- .btn { position: absolute; border: 2px solid white; padding: 10px 18px; text-align: center; right: 16px; bottom: 16px; color: white; text-decoration: none; } 

 <div class="collage"> <div class="collage-item"></div> <div class="collage-item"></div> <div class="collage-item"></div> <div class="collage-item"></div> <div class="btn">View all 11 photos</div> </div> 

Answer 1

You are setting the basis to 50% then when you add the margin it push the next element since can't fit side by side anymore. You may want to let the items grow and avoid the basis:

.collage-item {
  flex: 1 0 auto;
}

Jsfiddle Demo

Answer 2

no need really to set a width (eventually a min-width and a min-height ), just tell the element to spray evenly via the short : flex:1; and also, calc() will not be necessary .

i added a last row of 3 to show the behavior: https://jsfiddle.net/ja6820vu/10/

 * { box-sizing: border-box; } .collage { position: relative; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-bottom: 32px; } .collage-item { min-height: 17.5vw; min-width: 30%; margin: 1em 1em 0 0; background: url("https://www.audi.co.uk/content/dam/audi/production/Models/NewModelsgallery/A5range/A5_Coupe/MY17/1920x1080_A5-Coupe-2016-side.jpg") no-repeat; background-size: cover; flex: 1; } .collage-item:nth-child(1) { margin: 0; margin-bottom: 16px; } .collage-item:nth-child(2), .collage-item:nth-child(3) { margin: 0; height: 25vw; } .collage-item:nth-child(2) { margin: 0; margin-right: 16px; } .collage-item:nth-child(4) { margin: 0; margin-top: 16px; } .collage-item:nth-child(1), .collage-item:nth-child(4) { flex: 0 0 100%; height: 50vw; } .collage-item:nth-last-child(2) { margin: 1em 0 0 0; background:url(http://www.comedywildlifephoto.com/images/gallery/0/00000150_t.jpg); background-size: cover; } .btn { position: absolute; border: 2px solid white; padding: 10px 18px; text-align: center; right: 16px; bottom: 16px; color: white; text-decoration: none; } 

 <div class="collage"> <div class="collage-item"></div> <div class="collage-item"></div> <div class="collage-item"></div> <div class="collage-item"></div> <div class="collage-item"></div> <div class="collage-item"></div> <div class="collage-item"></div> <div class="btn">View all 11 photos</div> </div> 

Answer 3

You have both second row images set to 50% width:

flex: 0 0 50%;

When you add the 16px horizontal margin, you exceed the total width of the row, forcing a wrap:

50% + 50% + 16px = overflow

Try factoring the margin space into the width of the images:

flex: 0 0 calc(50% - 8px);

revised fiddle