css - start - Comprender la diferencia entre las propiedades flex y grow

flexbox guia

Question

¿Cuál es la diferencia de efecto entre establecer flex: 1; y establecer flex-grow: 1; ? Cuando configuro el primero en mi código, las dos columnas que tengo se muestran con el mismo ancho, mientras que no lo hacen cuando configuro este último.

Esto es extraño, ya que asumí que establecer flex: 1; solo afecta la propiedad flex-grow .

Answer 1

flex es una característica abreviada de flex-grow , flex-shrink y flex-basis .

En este caso, flex: 1 sets

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0 (en los borradores de especificaciones anteriores era flex-basis: 0% )

Si solo usa flex-grow: 1 , tendrá

• flex-grow: 1
• flex-shrink: 1
• flex-basis: auto

Entonces, la diferencia es que el tamaño de la base flexible será 0 en el primer caso, por lo que los elementos flexibles tendrán el mismo tamaño después de distribuir el espacio libre.

En el segundo caso, cada elemento flexible comenzará con el tamaño dado por su contenido, y luego crecerá o disminuirá según el espacio libre. Lo más probable es que los tamaños terminen siendo diferentes.