2.0 KiB
| title | localeTitle |
|---|---|
| Flex-grow | Flexión de crecimiento |
Flex-Grow
La propiedad flex-grow es una propiedad flexbox que le permite especificar la asignación de espacio libre a contenedores dentro de un contenedor flexible. ¡Proporciona una solución a todo ese espacio no deseado!
Te va a convertir tu contenedor de esta
a esto
¿Lo que acaba de suceder?
Bueno, agregamos dos cosas a la sintaxis css.
HTML
<p class = "ten">1</p>
<p class = "twenty">2</p>
CSS
body {
display:flex;
}
p {
flex-grow: 1;
}
Pasaron dos cosas
- El contenedor principal se convirtió en una pantalla flexible por
display:flex - El "espacio libre" restante se asignó luego entre los contenedores p restantes en una proporción igual, ya que cada uno tiene una propiedad de flex-grow de 1.
¿Qué pasa si tenemos p contenedores con diferentes propiedades de flex-grow?
Veamos un ejemplo.
Primero vamos a crear dos párrafos y habilitar la visualización: flex;
Note algunas cosas
- El esquema de color es agradable
- Hay un espacio vacío a la derecha de las dos cajas.
Ese espacio vacío es el "espacio libre" que se asignará a cada uno de los diferentes párrafos más adelante, dependiendo de sus propiedades de flex-grow.
Para ver esto en acción, démosle al primero una clase de "diez" y una propiedad de flex-grow de 1. También le demos al segundo una clase de "veinte" y una propiedad de flex-grow de 2.
Note algunas cosas
- El tamaño del segundo no es el doble del del primero, a pesar de tener una propiedad de flex-grow que es el doble del primero.
- Se llena todo el espacio. (Algunos márgenes se agregaron al lado para permitir que se vea más claramente).
A medida que cambiamos el tamaño de la pantalla, también encontramos que el primero se reduce al doble de la velocidad del segundo.
