CODEWITHSUNDEEP
htmlcssflexbox
Mr Toad
Mr Toad

Reputation: 256

flex-grow won't resize in proportion

I am creating a responsive site which has either a 2 column layout or 3 column layout.

I am using flex-box as further down the line I would like to set an order sequence to them.

I would like the boxes to fill the maximum available space.

Flexbox works perfectly except the images will not resize proportionately (as you can see in my code) Usually I would apply a 100% width and padding-bottom % to a div but flex-box items won't seem to allow this method.

If it helps, the images are all 300px wide. I tried applying the flex-box class to the images as I had hoped I might have more luck. Not yet...

Any advice would be great. 

      <div class="flex-container">
             <img class="flex-item" src="image.png"   alt=""/>
             <img class="flex-item" src="image.png"   alt=""/>
             <img class="flex-item" src="image.png"   alt=""/>
             <img class="flex-item" src="image.png"   alt=""/>
             <img class="flex-item" src="image.png"   alt=""/>
             <img class="flex-item" src="image.png"   alt=""/>
     </div>

CSS

.flex-container {
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  background-color:#99C;
  flex-direction: row;
  justify-content: center;

}


.flex-item {
      flex-grow:1;
}

Upvotes: 0

Views: 2317

Answers (1)

KZee
KZee

Reputation: 446

Add wrapper to image:

<div class="flex-item">
<img src="%path%" />
</div>

And css

img{
width: 100%;
max-width: 100%;
height: auto;
}

http://jsfiddle.net/ea2xh9we/

Upvotes: 1

Related Questions