Voy siguiendo las indicaciones de los videos, pero no logro que las miniaturas de los videos insertados en la página se puedan ajustar como en el ejemplo. Me salen así en la versión Desktop:
Voy siguiendo las indicaciones de los videos, pero no logro que las miniaturas de los videos insertados en la página se puedan ajustar como en el ejemplo. Me salen así en la versión Desktop:
¡Hola!
Para lograr un diseño responsivo con Flexbox, puedes utilizar las propiedades flex-wrap
y flex
para controlar el flujo de los elementos y su tamaño en diferentes tamaños de pantalla.
Aquí tienes un ejemplo de cómo podrías estructurar tu código CSS para lograr el efecto deseado:
.contenedor-de-videos {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.video {
flex: 0 1 calc(30% - 10px); /* Ajusta el tamaño de cada video según tus necesidades */
margin-bottom: 20px; /* Espacio entre los videos */
}
En este ejemplo, flex-wrap: wrap
permite que los elementos se distribuyan en varias líneas si no caben en una sola fila, y flex: 0 1 calc(30% - 10px)
establece el tamaño flexible de cada video.
Recuerda ajustar los valores según tus necesidades específicas. Si necesitas más ayuda, no dudes en preguntar.
Espero haber ayudado y ¡buenos estudios!