0

Given the following HTML

<div class="container-fluid body-content">
    <div class="banner row images">            
      <div>
        <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" />
      </div>
      <div>
        <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" />
      </div>          
      <div>
        <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" />
      </div>
      <div>
        <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" />
      </div>
      <div>
        <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" />
      </div>
  </div>

and css

div.banner.row.images {
    display: flex;
    flex-wrap: wrap;
}
div.banner.row.images div {
        flex: 1 1 auto;
}

How do I get the fifth image to align right, so that all the space taken up is in the middle of the flex box.

I have tried space-between, but that creates a left margin on the far left image, and a right border on the far right image.

I want the first image left aligned, the last image right aligned, and space in between, or just let the images grow to fill the space.

Booply Here

Asons
  • 84,923
  • 12
  • 110
  • 165
Jim
  • 14,952
  • 15
  • 80
  • 167

1 Answers1

0

Element .row from bootstrap has some pseudoelements added in default bootstrap css which will crash your flex for this elements. All you have to do is add:

div.banner.row.images::before,
div.banner.row.images::after {
    content:none;
}

and then remove flex: 1 1 auto for div.banner.row.images div and add justify-content: space-between todiv.banner.row.images. Images will be aligned to left and right without default container padding. If you want to have this padding just remove class row for .banner element.

Joint
  • 1,218
  • 1
  • 12
  • 18
  • thanks, been struggling with it for hours, didn't occur to me that bootstrap 'row' was the culprit...! – Jim Jan 14 '17 at 11:17