mit flexbox und Skalierung Bilder und bleiben in der gleichen Zeile

Question

Ich habe die folgenden jsfiddle.

Beachten Sie, wenn die Bilder skalieren, bleiben sie nicht auf der gleichen Linie. Wie kann ich flexbox verwenden, um die Bilder so zu skalieren, dass sie in der gleichen Zeile bleiben, in der der Browser die Größe ändert?

Siehe Code unten: http://codepen.io/jasmine1233333/pen/NNBVZe

CSS:

.npwfu-example-shell { 
    overflow: hidden; 
    min-width: 1100px; 
    max-width: 1920px; 
    margin: 0 auto; 
    width: 100%; 
    box-sizing: border-box; 
    backface-visibility: hidden; 
} 

.npwfu-example-shell .example-grid { 
    box-sizing: border-box; 
    width: 100%; 
    margin-left: 80px; 
    transition: transform 0.5s; 
    transition-timing-function: cubic-bezier(0, 0, 0.26, 0.89); 
    will-change: transform; 
    text-align: left; 
    min-height: 360px; 
    display: flex; 
    align-items: flex-end; 
    flex-flow: nowrap; 
    backface-visibility: hidden; 
} 

.create-option { 
    flex: 0 0 auto; 
    max-width: 20%; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    margin-right: 0.5%; 
    cursor: pointer; 
    display: inline-block; 
    vertical-align: bottom; 
    backface-visibility: hidden; 
} 

.create-option-thumb { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    box-shadow: 0px 1px 3.36px 0.14px rgba(0, 0, 0, 0.14); 
    transition: transform 0.5s ease-in; 
    backface-visibility: hidden; 
} 

.create-option-thumb-img img { 
    width: 100%; 
    height: auto; 
    z-index: -1; 
} 

.create-option-label { 
    padding: 0px; 
    color: #82919b; 
    font-size: 1.38em; 
    font-weight: 400; 
    width: 100%; 
    text-align: center; 
    display: block; 
    margin-top: 1.1em; 
} 

Answer 1

Ich bin nicht sicher, was Sie versuchen zu tun, aber man kann versuchen, diese Zugabe:

article{ 
    align-self:center; 
}