Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Ayuda con Flex-grow del vídeo

Hola Comunidad, espero estén bien.

Siguiendo el paso a paso del contenido de Flexbox me he topado con el siguiente problema. Al incluir la propiedad "Flex-Grow" al iFrame del vídeo, lo único que pasa es que el vídeo se muestra más ancho, y no incrementa en la misma proporción en el alto. Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Ya intenté incrementar el alto del contenedor del vídeo, pero me da el mismo resultado, es decir no se incrementa a lo alto el video.

Este es el código, tal cual lo puso el instructor, pero a mi me da el resultado que muestro en la imagen.

.videoSobre .container{
    display: flex;
}
.videoSobre-sobre{
    text-align: center;
    display: flex;
    flex-direction: column;
}
.videoSobre-video{
    flex-grow: 1;
}
.videoSobre-sobre-list{
    flex-grow: 1;
}

Me pueden comentar si no he entendido correctamente la forma de usar el flex-grow, o bien si me hace falta algo más.

Desde ya, muchas gracias por sus respuestas.

1 respuesta

Hola Alumno, espero que estés bien.

La propiedad flex-grow en CSS es utilizada para determinar cómo un elemento se expande dentro de un contenedor cuando hay espacio disponible. Esta propiedad se utiliza junto con flex-shrink y flex-basis para determinar cómo un elemento se comporta dentro de un contenedor flexible.

El valor de flex-grow determina cuánto espacio adicional un elemento debe ocupar en relación a los otros elementos dentro del contenedor. Por defecto, todos los elementos tienen un valor de flex-grow de 0, lo que significa que no crecerán para ocupar espacio adicional si está disponible.

Si estableces un valor de flex-grow mayor que 0 en un elemento, indicarás al navegador que este elemento debe ocupar más espacio que los demás elementos dentro del contenedor. Por ejemplo, si estableces un valor de flex-grow de 2 para un elemento y un valor de 1 para otro elemento, el primer elemento ocupará el doble de espacio que el segundo elemento cuando haya espacio disponible en el contenedor.

En resumen, flex-grow controla cómo un elemento se expande dentro de un contenedor flexible cuando hay espacio disponible, y su valor determina la proporción en la que un elemento ocupará espacio adicional en comparación con los demás elementos dentro del contenedor.

El instructor en el video tiene la herramienta de inspección abierta todo el tiempo lo que te hace creer que el video de él es menor que lo suyo, pero no lo es, puedes abrir la herramienta de inspección y verás que tu video se queda al mismo tamaño de lo de él. Esto es algo debes llevar en consideración cuando estás desarrollando, que la herramienta de inspección ocupa espacio en la pantalla del navegador y que también el tamaño de los elementos si son flexibles se verá diferente en los diferentes tamaño de pantalla.

Si tienes alguna duda, no dejes de preguntar. ¡Estamos aquí para ayudarte!.

¡Saludos!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios