Flexbox-Bildergalerie bricht beim Laden ab, dann repariert sie sich selbst.

Question

Das Problem ist, dass wenn ein Bild, das kein Quadrat ist, geladen wird, bricht es die Flexbox und die anderen Bilder werden nach unten geschoben. Wenn der Container aktualisiert wird, weil sich die Größe des Browsers ändert, oder wenn der Container erneut aktualisiert wird, wird der Container aktiviert.

Leider gibt es keine Möglichkeit, den Snippet-Container zu aktualisieren. Wenn Sie jedoch das Snippet bearbeiten, es ausführen und dann Ihre Browsergröße ändern, können Sie das Problem in Aktion sehen.

GIF der Ausgabe: 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>

Answer 1

Die Ursache des Problems ist unklar.

Sie machen jedes Bild zu einem Inline-Flex-Container (display: inline-flex). Sie fügen dann Ansichtsfenster-Prozenteinheiten zur Breite, Höhe und zum Rand hinzu.

Ich würde sagen, diese Kombination von relativ neuen Eigenschaften ist verwirrend der Browser, die schnell wiederhergestellt wird, wenn das Fenster neu sortiert wird.

(By the way, ist die Ursache des Problems nicht das Bild selbst. Wenn Sie das Putin Foto entfernen, das Problem weiterhin besteht. Eine Grenze hinzufügen um jeden .image für eine Illustration.)

Hier ist ein einfache und effiziente Flexbox Lösung, die das Problem vermeidet:

#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>