Haga que flex-grow expanda los elementos según su tamaño original

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

Puede ver a continuación que lo que intenté hacer con flex resultó en que todos los botones tuvieran el mismo ancho. Sé que flex-growse puede usar para hacer crecer proporcionalmente cada elemento, pero no sé cómo hacer que todos crezcan en relación con su tamaño original.

Puedes ver en la segunda fila que el elemento azul es más grande que los otros dos. Sólo quiero que los tres se expandan desde 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;
}

<div class="row-flex">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

<br/>

<div class="row">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

Expandir fragmento

Apr 20 '17 20:04 Sam Willis

Respuesta corta

Cambiar de flex: 1a flex: auto.

Explicación

La flex-growpropiedad tiene en cuenta dos datos clave:

El espacio libre en la fila/columna donde se está utilizando.
El valor de la flex-basispropiedad.

Distribución del espacio libre

La flex-growpropiedad distribuye el espacio libre en el contenedor entre los elementos flexibles de la misma línea.

Si no hay espacio libre, flex-growno tiene efecto.

Si hay espacio libre negativo (es decir, la longitud total de los elementos flexibles es mayor que la longitud del contenedor), entonces flex-growno tiene ningún efecto y flex-shrinkentra en juego.

El flex-basisfactor

Cuando flex-basises 0, flex-growignora el tamaño del contenido en elementos flexibles y trata todo el espacio en la línea como espacio libre.

Este es el tamaño absoluto . Todo el espacio en la línea está distribuido.

Cuando flex-basises auto, primero se deduce el tamaño del contenido en elementos flexibles para determinar el espacio libre en cada elemento. flex-growluego distribuye el espacio libre entre los elementos (según el flex-growvalor de cada elemento).

Este es el tamaño relativo . Sólo se distribuye el espacio sobrante en la línea.

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

ingrese la descripción de la imagen aquí

Ejemplos:

flex: 1(dimensión absoluta)

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

Aplicado a todos los elementos flexibles, esto hará que tengan la misma longitud, independientemente del contenido. (Tenga en cuenta que en algunos casos será necesario anular el tamaño mínimo predeterminado para que se produzca este efecto).

flex-grow: 1(tamaño relativo)

Esta regla por sí sola tendrá en cuenta tanto el tamaño del contenido como el espacio disponible, porque el valor predeterminado flex-basisesauto .

flex: auto(tamaño relativo)

Esta abreviatura 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 deflex

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

Apr 20 '2017 20:04 Michael Benjamin

No estoy seguro de si esto es exactamente lo que buscas, pero si simplemente configuras flex-grow:1en lugar de flex:1;, creo que ese es el 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;
}

<div class="row-flex">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

Expandir fragmento

Apr 20 '2017 13:04 Pete