How to equally distribute images horizontally using CSS making images grow/shrink

Question

I want to have a number of images in a horizontal line. The problem is that the number of images is variable and I would prefer a general solution to a solution where to set the width in percent with STYLE="". Thought this couldn't be too hard and tried it with flexbox:

<div id="thumbs">
    <img src="http://dummyimage.com/300x200/444/fff" alt=""/>
    <img src="http://dummyimage.com/300x200/444/fff" alt=""/>
    <img src="http://dummyimage.com/300x200/444/fff" alt=""/>
</div>

#thumbs {   
    width: 100%;
    max-width:100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

img {
    align-self: stretch;
    flex-grow: 1;
    flex-shrink: 1;
}

http://jsfiddle.net/Lq6z42hs/

This works fine when resizing the #thumbs-container to a width bigger than 900px, because the images are strechted to the new width, which is what I would like to happen. But resizing the conainter to a width less then 900px should make the images shrink evenly to the available space which doesn't happen: They stay at the width of 300px. How can I make the images shrink?

Answer 1

We simply wrap each <img> in a <div> and give each img a width of 100%.

#thumbs {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

#thumbs>div {
  align-self: stretch;
  flex-grow: 1;
  flex-shrink: 1;
}

img {
  width: 100%;
}

<div id="thumbs">
  <div>
    <img src="http://dummyimage.com/300x200/444/fff" alt="" />
  </div>
  <div>
    <img src="http://dummyimage.com/300x200/444/fff" alt="" />
  </div>
  <div>
    <img src="http://dummyimage.com/300x200/444/fff" alt="" />
  </div>
</div>

Answer 2

You'll want to set max-width of 33.3333%...

#thumbs {
width: 100%;
max-width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}

img {
flex-grow: 1;
flex-shrink: 1;
max-width: 33.3333%;
}

<div id="thumbs">
<img src="http://dummyimage.com/300x200/444/fff" alt=""/>
<img src="http://dummyimage.com/300x200/444/fff" alt=""/>
<img src="http://dummyimage.com/300x200/444/fff" alt=""/>
</div>

Responsive demo