¿Por qué flexbox estira mi imagen?

Flexbox tiene este comportamiento donde estira las imágenes a su altura natural. En otras palabras (más específicas), si tengo un contenedor de flexbox con una imagen secundaria y cambio el tamaño de la imagen, la altura no cambiará de tamaño y la imagen se alargará.

Appify

some text

Y esta hoja de estilo

 div { display: flex; flex-wrap: wrap; } img{ width: 50% } 

Añadí este codepen para demostrar a qué me refiero. ¿Qué causa esto?

Se está estirando porque el valor predeterminado de align-self es stretch . Establecer align-self para center .

 align-self: center 

Ver doc aquí: align-self

La clave es align-self: center :

 .container { display: flex; flex-direction: column; } img { max-width: 100%; } img.align-self { align-self: center; } 
 

Without align-self:

With align-self:

Enfrenté el mismo problema con un menú de la Fundación. align-self: center; no funcionó para mí

Mi solución fue envolver la imagen con un

...

Agregar margin para alinear imágenes:

Como queríamos que la image se left-aligned a la left-aligned , agregamos:

 img { margin-right: auto; } 

Del mismo modo, para que la image se right-aligned a la right-aligned , podemos agregar margin-right: auto; . El fragmento muestra una demostración para ambos tipos de alineación.

Buena suerte…

 div { display:flex; flex-direction:column; border: 2px black solid; } h1 { text-align: center; } hr { border: 1px black solid; width: 100% } img.one { margin-right: auto; } img.two { margin-left: auto; } 
 

Flex Box