attribute - title html español

¿Por qué el relleno está expandiendo un elemento flexible?

Question

En el siguiente fragmento, la primera fila tiene dos divs con flex-grow: 1 . Como era de esperar, cada división ocupa el 50% de la pantalla.

Cuando se agrega el relleno al div izquierdo, ese ya no es el caso. ¿Alguien puede explicar por qué?

body > div {
  height: 50px;
  display: flex;
}
body > div > div {
  flex: 1;
  box-sizing: border-box;
}
#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;
}

<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

Answer 1

Los cálculos se definen en la especificación.

El tamaño de un elemento flexible con relleno y flex-grow se determina mediante cálculos en la especificación de flexbox .

Estos cálculos son similares al tamaño de elementos flexibles con relleno y flex-shrink .

Francamente, la matemática es bastante técnica y no es la cosa más fácil de entender en el mundo.

Pero si quieres entrar en él, aquí están los detalles:

• 9.7. Resolución de longitudes flexibles
• ¿Cómo afecta el factor de contracción flexible en el relleno y la caja de borde?

Ejemplos

A continuación hay ejemplos que, con suerte, hacen que el comportamiento sea más claro

NOTA: tenga en cuenta que flex-grow no es una herramienta para establecer directamente la longitud de un elemento flexible. Es una herramienta para distribuir el espacio en el contenedor entre elementos flexibles. La propiedad de flex-basis establece el tamaño principal inicial de un elemento flexible. Si se utiliza flex-grow con flex-basis , el problema de la pregunta se resuelve (consulte el ejemplo 4 a continuación).

Ejemplo 1

En un contenedor de bloques , donde tiene box-sizing: border-box , los cuadros en su código se representarán de manera uniforme sin importar el relleno.

body > div {
  height: 50px;
  /* display: flex; */
  font-size: 0; /* remove inline block whitespace */
}
body > div > div {
  /* flex: 1; */
  box-sizing: border-box;
  height: 50px;
  display: inline-block;
  width: 50%;
}
#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;

<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

demo jsFiddle

Ejemplo # 2

En un contenedor flexible , donde tiene box-sizing: border-box , y el width o flex-basis se utilizan para calcular la longitud, los cuadros se representarán de manera uniforme independientemente del relleno.

body > div {
  height: 50px;
  display: flex;
  }

body > div > div {
  flex-basis: 50%;
  /* width: 50%; this works, as well */
  box-sizing: border-box;
}

#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;

<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

demo jsFiddle

Ejemplo # 3

En un contenedor flexible, donde tiene box-sizing: border-box y flex-grow , aparecerá que box-sizing no funciona ...

body > div {
  height: 50px;
  display: flex;
  }

body > div > div {
  flex: 1;
  /* flex-basis: 50%; */
  /* width: 50%; this works, as well */
  box-sizing: border-box;
}

#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;

<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

demo jsFiddle

pero eso no es realmente correcto ...

Ejemplo # 4

flex-grow expande el ancho de un elemento flexible en función del espacio disponible en el contenedor flexible. En otras palabras, ignora el relleno ( y los bordes ).

Sin embargo, si simplemente especifica flex-grow junto con flex-basis , el border-box funcionará:

flex: 1 1 50%; /* flex-grow, flex-shrink, flex-basis */

body > div {
  height: 50px;
  display: flex;
  }

body > div > div {
  flex: 1 1 50%; /* flex-grow, flex-shrink, flex-basis */
  /* flex-basis: 50%; */
  /* width: 50%; this works, as well */
  box-sizing: border-box;
}

#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;

<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

demo jsFiddle

Answer 2

Ese es el comportamiento correcto por lo que yo sé.

flex:1 es, por supuesto, taquigrafía para:

flex-grow:1;
flex-shrink:1;
flex-basis:0

Esto permite que el div crezca si es necesario, lo que, en este caso, lo hace. No se mantendrán automáticamente los elementos flexibles como todos del mismo tamaño si, de hecho, son diferentes.