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

Flexbox- ¿Cómo sabe nuestro código que tiene que dividir en 5 elementos?

Hola a todos, mi consulta es ¿cómo sabe nuestro código que tiene que dividir en 5 elementos? Para realizar la edición de la página con flexbox, en la parte de contenidoPrincipal-cursos tenemos el siguiente código:

.contenidoPrincipal-cursos { display:flex; flex-wrap: wrap; }

.contenidoPrincipal-cursos-link { display: flex; width: 23%; }

El display realiza que los elementos se coloquen uno al lado del otro. El width nos dice que porcentaje del tamaño total usa cada columna de elemento? El flex-wrap: wrap indica que los elementos se quiebren y se rellenen en la próxima columna al ocupar el espacio predeterminado?

No entiendo como sabe nuestro código dividir en 5 iconos las dos primeras columnas y en 4 las dos siguientes.

1 respuesta

¡Hola Andreanoeliamorinigo!

En respuesta a tu pregunta, el código no "sabe" automáticamente dividir los elementos en 5 o 4 columnas. La cantidad de elementos que se muestran en cada fila depende del ancho de la pantalla y del ancho de cada elemento.

En tu código, el ancho de cada elemento está establecido en un 23%, lo que significa que en una pantalla lo suficientemente grande, cabrán 4 elementos en cada fila. Sin embargo, cuando la pantalla se hace más pequeña, los elementos se ajustarán automáticamente para caber en menos filas, lo que puede resultar en 5 elementos en una fila en lugar de 4.

Espero que esto te haya ayudado a entender cómo funciona la distribución de elementos en flexbox. ¡Si tienes alguna otra pregunta, no dudes en preguntar! ¡Espero haber ayudado y buenos estudios!c

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