CODEWITHSUNDEEP
htmlcssflexbox
Hobbyist
Hobbyist

Reputation: 16202

Flexbox image gallery breaks on load, then repairs itself on browser resize

The issue is that when the image that is not a square is loaded, it breaks the flexbox and the other images are pushed down. When the container is refreshed due to browser-size changing or something else refreshing the container goes into place.

Unfortunately, there's no way to refresh the snippet container. However, if you edit the snippet, run it, then change your browser size, you can see the issue in action.

GIF of the issue: https://gyazo.com/728556885b29649b5b4a9bf4ad60772a

#images {
  text-align: center;
}

.image {
  width: 27vw;
  height: 27vw;
  margin: 1vw;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 6px;
  flex-wrap: wrap;
}

img {
  align-self: flex-start;
  flex-shrink: 0;
  max-width: 100%;
  max-height: 100%;
}
<div id="images" flex>
  <div class="image"><img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg"></div>
  <div class="image"><img src="http://placehold.it/512x512"></div>
  <div class="image"><img src="http://placehold.it/512x512"></div>
  <div class="image"><img src="http://placehold.it/512x512"></div>
  <div class="image"><img src="http://placehold.it/512x512"></div>
  <div class="image"><img src="http://placehold.it/512x512"></div>
 </div>

Upvotes: 1

Views: 317

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371889

The source of the problem is unclear.

You're making each image an inline flex container (display: inline-flex). You're then adding viewport percentage units on the width, height and margin.

I would say this combination of relatively new properties is confusing the browser, which quickly recovers when the window is re-sized.

(By the way, the source of the problem is not the image itself. If you remove the Putin photo, the problem persists. Add a border around each .image for an illustration.)

Here is a simpler and more efficient flexbox solution, which avoids the problem:

#images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.image {
  width: 27vw;
  height: 27vw;
  margin: 1vw;
  border-radius: 6px;
}

img {
  max-width: 100%;
  max-height: 100%;
}
<div id="images">
  <div class="image"><img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg"></div>
  <div class="image"><img src="http://placehold.it/512x512"></div>
  <div class="image"><img src="http://placehold.it/512x512"></div>
  <div class="image"><img src="http://placehold.it/512x512"></div>
  <div class="image"><img src="http://placehold.it/512x512"></div>
  <div class="image"><img src="http://placehold.it/512x512"></div>
 </div>

Upvotes: 2

Related Questions