Buenas!
Me gustaría saber/entender porque estamos aplicando display: flex en los elementos hijos del listado de cursos, no entiendo porque aparecen todos encimados, y también quisiera saber si hay alguna otra solución para este problema (un poco más entendible) Saludos.
.contenidoPrincipal-cursos{
display: flex;
flex-wrap: wrap;
}
.contenidoPrincipal-cursos-link{
display: flex;
width: 23%;
}
¡Hola Augusto!
La propiedad CSS "display: flex" se utiliza para crear un contenedor flexible que puede ajustar automáticamente el tamaño y la posición de sus elementos hijos. En el caso de la clase ".contenidoPrincipal-cursos", se está aplicando "display: flex" para que los elementos hijos (en este caso, los cursos) se distribuyan automáticamente en el contenedor principal de manera flexible.
La propiedad "flex-wrap: wrap" se utiliza para que los elementos hijos se ajusten automáticamente en filas adicionales si no hay suficiente espacio en la fila actual.
En cuanto a la pregunta sobre por qué los elementos aparecen encimados, es posible que se deba a la falta de espacio en la fila actual. Al aplicar "display: flex" a los elementos hijos, estos se ajustarán automáticamente para que se ajusten en la fila actual. Si los elementos no tienen suficiente espacio para ajustarse en la fila actual, se ajustarán automáticamente en la siguiente fila.
En cuanto a otras soluciones, podrías intentar ajustar el ancho de los elementos hijos ".contenidoPrincipal-cursos-link" para que se ajusten mejor en la fila actual. También podrías intentar ajustar el tamaño de la fuente o el espaciado entre los elementos para que se ajusten mejor en la fila actual.
Espero que esto te ayude a entender mejor cómo funciona "display: flex" y cómo se aplica en este caso en particular. ¡Espero haber ayudado y buenos estudios!