2
respuestas

¿Cómo utilizar un grid en flex?

Ahora necesitamos empezar un grid, para ello usaremos flex. ¿Cómo sería el CSS, usando flexbox, para organizar (pensando sólo en el posicionamiento) el siguiente HTML?

Ruby on Rails
Java
HTML
Python
Wordpress
Bootstrap
Java Web
MySQL

Cuando ejecute esta prueba en su máquina, recuerde poner la altura, el acho y algún color para las divs.

.box { height: 50px; width: 50px; background-color: green; }

Hola compañeros y compañeros, alguiwn me podría explicar ¿como se corrige el codigo? Es que no le entiendo nada

2 respuestas

¡Hola Carlosmarcorodríguezgómez!

Para crear un grid utilizando Flexbox, puedes utilizar la propiedad "flex-wrap" junto con "flex-basis" y "flex-grow".

Primero, debes definir el contenedor "grid" como un contenedor flexible con "display: flex". Luego, puedes establecer "flex-wrap: wrap" para que los elementos se ajusten automáticamente a la siguiente línea cuando no haya suficiente espacio en una sola línea.

A continuación, puedes establecer "flex-basis" en un valor específico para definir el tamaño base de cada elemento. En este caso, puedes establecer "flex-basis: 25%" para que cada elemento ocupe el 25% del ancho del contenedor "grid".

Finalmente, puedes establecer "flex-grow: 1" para que cada elemento pueda crecer y ocupar cualquier espacio adicional disponible en la línea.

Aquí está el código CSS que podrías utilizar:

.grid { display: flex; flex-wrap: wrap; }

.box { height: 50px; flex-basis: 25%; flex-grow: 1; background-color: green; }

Recuerda que puedes ajustar los valores de "flex-basis" y "flex-grow" según tus necesidades.

¡Espero haber ayudado y buenos estudios!

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

Gracias Rafaela Ochoa, claro que si me ayudo su respuesta.