CODEWITHSUNDEEP
cssresponsive-designflexbox
Ahmed Magdy
Ahmed Magdy

Reputation: 341

Stretching an image inside a flex item to full width

I am playing around with CSS Flexbox and media queries and I stumbled across this issue. Considering the following code of mine, I can't get the last image in the last div item in the flex container to stretch to full width though I set the div item width to 100%. How can I achieve this? Here is my code:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>Playing with CSS Flexbox</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="layoutstyle.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <header>
            <nav>
                <div class="logo">
                </div>
                <ul>
                    <li>
                    </li>
                </ul>
            </nav>
        </header>
        <main id="container">
            <div class="featured">
            </div>
            <div class="flexbox col-1">
                <img src=images/singapore-small.jpg alt=""
                     sizes="(min-width: 650px) 70vw, 100w"
                     srcset="images/singapore-x-small.jpg 400w,
                             images/singapore-small.jpg 600w,
                             images/singapore-medium.jpg 800w,
                             images/singapore-large.jpg 1000w,
                             images/singapore-x-large.jpg 1500w
                             "
                     />
            </div>
            <div class="flexbox col-2">

                <img src=images/skyscrapers-small.jpg alt=""
                     sizes="(min-width: 650px) 70vw, 100w"
                     srcset="images/skyscrapers-x-small.jpg 400w,
                             images/skyscrapers-small.jpg 600w,
                             images/skyscrapers-medium.jpg 800w,
                             images/skyscrapers-large.jpg 1000w,
                             images/skyscrapers-x-large.jpg 1500w
                             "
                     />

            </div>
            <div class="flexbox col-3">

                <img src=images/sunset-small.jpg alt=""
                     sizes="(min-width: 650px) 70vw, 100w"
                     srcset="images/sunset-x-small.jpg 400w,
                             images/sunset-small.jpg 600w,
                             images/sunset-medium.jpg 800w,
                             images/sunset-large.jpg 1000w,
                             images/sunset-x-large.jpg 1500w
                             "
                     />

            </div>
        </main>
    </body>
</html>

////////CSS//////

* {
    box-sizing: border-box;
}

body,html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
}

 li {
    padding: 0;
     list-style-type: none;
}

header {
    display: flex;
}

main {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
}

@media all and (max-width: 650px) {

    .flexbox {
        width: 100%;
    }

}

@media all and (min-width: 651px) {

    .col-1, .col-2 {
        width: 50%;
    }

    .col-3 {
        width: 100%;
    }
}

Upvotes: 1

Views: 11229

Answers (2)

CreativeCreate
CreativeCreate

Reputation: 196

If older browser compatibility isn't an issue, using just flex-box properties can achieve this. So regardless of the number of flex-items in the container, last odd-item always stretches. 

flex-grow: unitless value;

Tells flex item how much space inside the flex container it should take if necessary (in proportion to others.)

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least). source & more details: css-tricks.com

Following is the basic idea,

#container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari */
  display: flex;
  flex-wrap:wrap;
}
.flexbox {
  -webkit-box-flex: 1;  /* OLD - iOS 6-, Safari */
  flex-basis: 50%;
  flex-grow: 2;
}
.flexbox img {width: 100%;}

CodePen Example

Upvotes: 0

Mario
Mario

Reputation: 8300

Add this to your CSS to maximize your images: 

.flexbox img {
  width: 100%;
  height: auto;
}

Demo at CodePen

Upvotes: 1

Related Questions