CODEWITHSUNDEEP
htmlcssflexbox
Zoltan King
Zoltan King

Reputation: 2262

Shrinking images with Flexbox. Wrapped image expands to 100% width

I created a small sample that shows movie covers and I like the "flex: calc(...)" in action. As the browser window is reduced the size of the images are also reduced a bit. However notice when the image wraps, the wrapped image is in full width. Is it possible to make the wrapped image to be the same size as the images above it?

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.movies {
  max-width: 1300px;
  margin: 0 auto;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-item {
  margin: 10px 15px 0;
}

.flex-item > img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Tablet */
@media screen and (min-width: 40em) {
  body {
    background: limegreen;
  }
  
  .movies {
    max-width: 700px;
  }

  .flex-item {
    margin: 0 15px 32px;
    flex: calc(50% - 30px);
  }
}

/* Desktop */
@media screen and (min-width: 70em) {
  body {
    background: lightyellow;
  }

  .movies {
    max-width: 1200px;
  }

  .flex-item {
    margin: 0 6px 15px;
    flex: calc(33.3333% - 20px);
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learn-flex.css">
  <title>Learn Flex</title>
</head>
<body>
  <div class="movies">
    <div class="flex-container">
      <div class="flex-item-1 flex-item">
        <img src="https://images-na.ssl-images-amazon.com/images/I/81PWF-yAEyL._AC_SL1100_.jpg" alt="">
      </div>
      <div class="flex-item-2 flex-item">
        <img src="https://images-na.ssl-images-amazon.com/images/I/71VDlRubWtL._AC_SY741_.jpg" alt="">
      </div>
      <div class="flex-item-3 flex-item">
        <img src="https://fanart.tv/fanart/movies/12230/movieposter/101-dalmatians-5a529ef29b36c.jpg" alt="">
      </div>
    </div>
  </div>
</body>
</html>

enter image description here

I want the image with the dogs to be the same size as the ones above and leave the space on the right side empty, since there is no fourth cover. Is it possible to achieve that with flexbox?

Upvotes: 0

Views: 44

Answers (1)

A Haworth
A Haworth

Reputation: 36436

If you are setting the width of a flex item you can also ask that it neither shrink nor grow. e.g. in your tablet case:

  .flex-item {
    margin: 0 15px 32px;
    flex: 0 0 calc(50% - 30px);


:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.movies {
  max-width: 1300px;
  margin: 0 auto;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-item {
  margin: 10px 15px 0;
}

.flex-item > img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Tablet */
@media screen and (min-width: 40em) {
  body {
    background: limegreen;
  }
  
  .movies {
    max-width: 700px;
  }

  .flex-item {
    margin: 0 15px 32px;
    flex: 0 0 calc(50% - 30px);
  }
}

/* Desktop */
@media screen and (min-width: 70em) {
  body {
    background: lightyellow;
  }

  .movies {
    max-width: 1200px;
  }

  .flex-item {
    margin: 0 6px 15px;
    flex: 0 0 calc(33.3333% - 20px);
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learn-flex.css">
  <title>Learn Flex</title>
</head>
<body>
  <div class="movies">
    <div class="flex-container">
      <div class="flex-item-1 flex-item">
        <img src="https://images-na.ssl-images-amazon.com/images/I/81PWF-yAEyL._AC_SL1100_.jpg" alt="">
      </div>
      <div class="flex-item-2 flex-item">
        <img src="https://images-na.ssl-images-amazon.com/images/I/71VDlRubWtL._AC_SY741_.jpg" alt="">
      </div>
      <div class="flex-item-3 flex-item">
        <img src="https://fanart.tv/fanart/movies/12230/movieposter/101-dalmatians-5a529ef29b36c.jpg" alt="">
      </div>
    </div>
  </div>
</body>
</html>

Upvotes: 1

Related Questions