El ancho del elemento flexible no cambia de tamaño en IE

user8758206

Estoy tratando de construir un montón de 'mosaicos' y tengo problemas con Internet Explorer: la mayoría / todos los demás navegadores parecen estar bien. El problema es que quiero que los mosaicos solo sean 4 por fila en el escritorio y 2 por fila en los móviles, pero en IE los otros mosaicos simplemente se aprietan en la misma fila en lugar de pasar a la siguiente línea.

El ancho de los elementos flexibles no parece funcionar y debería ser del 23,5% (en el escritorio) y del 48,5% en los móviles. ¿Alguien puede explicar qué está pasando aquí? ¡Parece que a IE no le gusta el código contemporáneo!

/* Flex Tests */
.sad-flex {
    display: flex;
    flex-flow: row wrap;
}
.flex-item {
    width: 23.5%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flex-item:not(:nth-of-type(4n+1)) { margin-left: 2% }
.flex-item:nth-of-type(n+5) { margin-top: 2% }
.flex-item-image-link { width: 100% }
.flex-item img {
    width: 100%;
    background-size: cover;
    background-position: center;
}
.flex-item, .flex-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1em;
    text-align: center;
    font-family: arial; /* perhaps remove */
    justify-content: flex-start;
}
.flex-text-content { padding: 10px }
.flex-item .flex-text.header {
    margin-bottom: 0;
    font-weight: 700;
    width: 100%;
}
.flex-item .flex-text.header a { color: #000 }
.flex-item .flex-text.price {
    padding-top: 20px;
    font-size: 1.4em;
    color: grey;
}
.flex-item .flex-text.description {
    font-size: 1em;
    padding-top: 20px;
    max-height: 6em; /* limits to 3 lines of text */
    overflow: hidden;
}
.flex-item .flex-btn {
    border: none;
    outline: 0;
    padding: 12px;
    color: #fff;
    background-color: #000;
    cursor: pointer;
    width: 100%;
    font-size: 1.3em;
    margin: auto auto 0 auto;
}
.flex-item .flex-btn:hover { opacity: 0.7 }
.flex-item ul { text-align: left }
@media (max-width: 767px) {
    .flex-item:not(:nth-of-type(4n+1)) { margin-left: 3% }
    .flex-item { width: 48.5% }
    .flex-item:not(:nth-of-type(even)) { margin-left: 0 }
    .flex-item:nth-of-type(n+3) { margin-top: 3% }
}
/* IE FIXES */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .sad-flex {
        -ms-flex-direction: row;
        -ms-flex-wrap: wrap;
    }
    .flex-item {
        -ms-flex: 1;
    }
    .flex-item * { width: 100% }
}
<div class="sad-flex">

    <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
    

<div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>

</div>

Itay Gal

IE no admite la flex: flex-grow flex-shrink flex-basistaquigrafía.

Necesitas cambiarlo a flex-grow.

Por ejemplo este

flex: 1 2 30px;

debe ser reemplazado con esto

flex-grow: 1;
flex-shrink: 2;
flex-basis: 30px;

En tu caso

.flex-item {
    flex-grow: 1;
}

/* Flex Tests */
.sad-flex {
    display: flex;
    flex-flow: row wrap;
}
.flex-item {
    width: 23.5%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flex-item:not(:nth-of-type(4n+1)) { margin-left: 2% }
.flex-item:nth-of-type(n+5) { margin-top: 2% }
.flex-item-image-link { width: 100% }
.flex-item img {
    width: 100%;
    background-size: cover;
    background-position: center;
}
.flex-item, .flex-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1em;
    text-align: center;
    font-family: arial; /* perhaps remove */
    justify-content: flex-start;
}
.flex-text-content { padding: 10px }
.flex-item .flex-text.header {
    margin-bottom: 0;
    font-weight: 700;
    width: 100%;
}
.flex-item .flex-text.header a { color: #000 }
.flex-item .flex-text.price {
    padding-top: 20px;
    font-size: 1.4em;
    color: grey;
}
.flex-item .flex-text.description {
    font-size: 1em;
    padding-top: 20px;
    max-height: 6em; /* limits to 3 lines of text */
    overflow: hidden;
}
.flex-item .flex-btn {
    border: none;
    outline: 0;
    padding: 12px;
    color: #fff;
    background-color: #000;
    cursor: pointer;
    width: 100%;
    font-size: 1.3em;
    margin: auto auto 0 auto;
}
.flex-item .flex-btn:hover { opacity: 0.7 }
.flex-item ul { text-align: left }
@media (max-width: 767px) {
    .flex-item:not(:nth-of-type(4n+1)) { margin-left: 3% }
    .flex-item { width: 48.5% }
    .flex-item:not(:nth-of-type(even)) { margin-left: 0 }
    .flex-item:nth-of-type(n+3) { margin-top: 3% }
}
/* IE FIXES */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .sad-flex {
        -ms-flex-direction: row;
        -ms-flex-wrap: wrap;
    }
    .flex-item {
        flex-grow: 1;
    }
    .flex-item * { width: 100% }
}
<div class="sad-flex">

    <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
    

<div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>

</div>

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

El ancho de los elementos en el contenedor flexible depende del contenido del último elemento

CSS Flex: al cambiar el tamaño del elemento flexible de envoltura, cambie su dimensión de ancho

Sticky de la Fundación Zurb cambia el tamaño del elemento en el pergamino

Material-UI: la cuadrícula receptiva no cambia de tamaño en el ancho del móvil

Cuando se cambia el tamaño de la ventana, el elemento span no obtiene su ancho

Mi método no cambia el tamaño del ancho y el alto de las imágenes, solo cambia el tamaño del tamaño

El ancho del elemento de borde es mayor que el ancho de la pantalla en el tamaño de pantalla más pequeño

React / CSS: el ancho del botón de animación cambia el tamaño después de que el contenido cambia cuando el ancho es automático

CSS Flex: alinea cada segundo elemento flexible en el ancho máximo del primer elemento

Vue actualiza el accesorio de datos cada vez que cambia el ancho del cliente del elemento

Detecte el tamaño de diseño final para la vista con ancho flexible en UITableViewCell

¿Cómo calcula flexbox el ancho del elemento flexible si no se establece ninguna base flexible o ancho?

Elemento de posición fija que hereda el ancho del elemento flexible

Elemento de posición fija que hereda el ancho del elemento flexible

Disminuye automáticamente el ancho del contenedor mientras cambia el tamaño de la ventana del navegador

Disminuye automáticamente el ancho del contenedor mientras cambia el tamaño de la ventana del navegador

Limite el ancho del elemento flexible independientemente del contenido

Jquery cambia el tamaño del elemento inferior en función del elemento de arriba de forma dinámica y sin problemas

¿Cómo colocar los 3 divs en una columna cuando se cambia el tamaño del ancho del navegador?

Javascript cambia el tamaño de la imagen en diferentes tamaños donde solo importa el ancho

Hacer que el elemento flexible tome el 100% del ancho de la nueva línea

¿Cómo mantener el ancho del elemento flexible después de eliminar el contenido?

¿Por qué deriveFont (tamaño del flotador) no cambia el tamaño de fuente en un JButton?

¿Hacer el elemento del mismo ancho que la imagen de tamaño dinámico?

Cambiar el ancho de un elemento en px al cambiar el tamaño de la ventana

el tamaño de fuente cambia la posición del elemento

El tamaño del elemento de RecyclerView cambia mientras se desplaza

CSS cambia automáticamente el tamaño del elemento de cuadrícula

Cómo hacer que el tamaño del ancho de entrada se anime mientras la consulta ajax cambia el valor del tamaño