Haga que los elementos de flex-grow se expandan en función de su tamaño original

Tengo 3 botones en una fila que varían en ancho. Quiero que todos ganen el mismo ancho para llenar el ancho restante de la fila, por lo que el más ancho seguirá siendo más ancho que los demás, etc.

Puede ver a continuación que lo que he intentado hacer con flex ha resultado en que todos los botones tengan el mismo ancho. Sé que flex-grow se puede usar para hacer crecer proporcionalmente cada elemento, pero no puedo encontrar la manera de hacer que crezcan todos en relación con su tamaño original.

Puede ver en la segunda fila que el artículo azul es más grande que los otros dos. Solo quiero que los tres se expandan de su tamaño actual por igual para llenar la fila.

Gracias

 .row-flex { width: 100%; display: flex; flex-direction: row; } .button { flex: 1; display: inline-block; padding: 10px; color: #fff; text-align: center; } .button--1 { background: red } .button--2 { background: green; } .button--3 { background: blue; } 
  

Respuesta corta

Todo lo que necesita hacer es cambiar de flex: 1 a flex: auto .


Explicación

La propiedad flex-grow en cuenta dos datos clave:

  1. El espacio libre en la fila / columna donde se está utilizando.
  2. El valor de la propiedad flex-basis .

Distribución de espacio libre

La propiedad flex-grow distribuye espacio libre en el contenedor entre elementos flexibles en la misma línea.

Si no hay espacio libre, flex-grow no tiene ningún efecto.

Si hay espacio libre negativo (es decir, la longitud total de los artículos flexibles es mayor que la longitud del contenedor), entonces flex-grow no tiene ningún efecto y flex-shrink entra en juego.


El factor de flex-basis

Cuando flex-basis es 0 , flex-grow ignora el ancho / alto del contenido en elementos flexibles y trata todo el espacio de la línea como espacio libre.

Este es el tamaño absoluto . Todo el espacio en la línea se distribuye.

Cuando flex-basis es auto , flex-grow primero factores en el tamaño del contenido en los artículos flexibles. A continuación, distribuye el espacio libre entre los elementos, lo que hace que cada artículo crezca proporcionalmente en función de la duración de su contenido.

Este es el tamaño relativo . Solo se distribuye espacio extra en la línea.

Aquí hay una ilustración de la especificación :

enter image description here


Ejemplos:

  • flex: 1 (tamaño absoluto)

    Esta regla abreviada se divide en: flex-grow: 1 / flex-shrink: 1 / flex-basis: 0

    Aplicado a todos los artículos flexibles, esto les dará la misma longitud, independientemente del contenido.

  • flex-grow: 1 (tamaño relativo)

    Esta regla por sí misma tendrá en cuenta tanto el tamaño del contenido como el espacio disponible, ya que el valor predeterminado de flex-basis es auto .

  • flex: auto (tamaño relativo)

    Esta taquigrafía tiene en cuenta tanto el tamaño del contenido como el espacio disponible porque se divide en:

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

Más variaciones aquí: 7.1.1. Valores básicos de flex

palabras clave adicionales para la búsqueda: diferencia entre flex-basis: auto flex-basis: 0

No estoy seguro de si esto es completamente lo que está buscando, pero si acaba de establecer flex-grow:1 lugar de flex:1; , Creo que es su resultado requerido:

 .row-flex { width: 100%; display: inline-flex; flex-direction: row; } .button { flex-grow: 1; padding: 10px; color: #fff; text-align: center; } .button--1 { background: red } .button--2 { background: green; } .button--3 { background: blue; } 
  

Usando propiedad flex , puedes establecer proporciones:

 .button { display: inline-block; padding: 10px; color: #fff; text-align: center; } .row { display: flex; } .button--1 { background: red; flex: 1 1 auto; } .button--2 { background: green; flex: 2 1 auto; } .button--3 { background: blue; flex: 3 1 auto; }