Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

duda sobre flexgrow

quiero saber si me pueden sacar la duda porque no estoy entendiendo bien sobre la propiedad flexgrow.... en la imagen que pongo, la idea es que las letras queden separadas del boton, y el instructor lo que hace es utilizar la propiedad flexgrow .videoSobre-sobre-list { flex-grow: 2; } y esa clase esta asignada al "ul" que contiene las frases de "estudia donde quiera" "Nuevo cursos todos los meses" "Cursos compatibles con el mercado"

el instructor dice: "que va a hacer el flexgrow en este caso, el va a crear de ese espacio que yo le estoy indicando de 2, va a crear 2 partes y colocarlo entre los 2 elementos, creando ese espacio entre el boton y el texto"

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

luego de aplicarlo queda asi

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadEl punto es que no termino de entender a que espacios se refiere... el dice "el va a crear de ese espacio que yo le estoy indicando de 2, va a crear 2 partes" no termino de entender a que espacio de 2 se refiere... y luego continua "y colocarlo entre los 2 elementos, creando ese espacio entre el boton y el texto" pero no termino de captar, encima en esa div, no solamente se encuentra el ul con esas palabras y el boton, sino que tbn se encuentra un titulo con h2 al cual nunca hace referencia, pero se acomoda todo junto, entonces menos entiendo cuando habla de 2 elementos pero hay 3....

Ventajas de Mini Alura

  • Estudia donde quiera
  • Nuevos cursos todos los meses
  • Cursos compatibles con el mercado
1 respuesta
solución!

Hola Romero,

Te explicaré un poco del funcionamiento de la propiedad. Ella especifica cuánto va a crecer un elemento en comparación con otros elementos que están dentro del mismo contenedor, recordando que todos estos elementos deben ser flex, es decir, estar dentro de un contenedor con la propiedad flex.

Si tengo 3 botones dentro del mismo contenedor y para uno de ellos aplico la propiedad flex-row:1; nada sucederá porque todos los botones tendrán el mismo tamaño:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Ahora si cambio la propiedad a flex-grow:2, este botón tendrá el doble del tamaño de los otros 2 botones en el mismo contenedor:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Comparto contigo la documentación que explica con más detalle esta propiedad: clique aqui!

En este caso específico de la clase, el instructor utilizó flex-grow: 2 en la clase . videoSobre-sobre-list para aumentar la altura de esta clase en relación al botón, creando el espacio entre ellos, ya que tanto esta clase cuanto el botón están dentro del mismo contenedor flex, puede notar que a medida que usted va aumentando el valor del flex-grow, esta distancia tiende a aumentar también.

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