css - column - ¿No entiendo la propiedad flex-grow?

propiedad order css

Question

Me temo que no debo entender flex-grow. Si saltas al JSFiddle a continuación, como yo lo entiendo, .big debería ser tres veces el tamaño del otro .flex-item . Como puedes ver, no es así. ¿Por qué?

http://jsfiddle.net/nrur6mmo/

.flex-container {
    display:flex;
    padding:0 20%;
}
.flex-item {
    flex-grow:1;
    list-style-type:none;
    border:1px solid black;
}
.big {
    flex-grow:3;
}

<ul class="flex-container">
    <li class="flex-item big">Why isn''t this exactly three times the size of the other one?</li>
    <li class="flex-item">Not really working like expected I don''t think...</li>
</ul>

Answer 1

Flex-grow es comúnmente malentendido de esta manera. Flex-grow solo controla cómo se distribuye el espacio sobrante entre los elementos flexibles, no lo grandes que sean en proporción entre sí.

Lo que estás buscando es realmente esto:

.flex-item {
  width: 25%;
  list-style-type:none;
  border:1px solid black;
}
.big {
  width: 75%;
}

Ver también

• Flex-grow no funciona como se esperaba (los artículos flexibles no tienen los anchos que espero)
• ¿En qué circunstancias se aplica flex-encogimiento a los elementos flexibles y cómo funciona?

Answer 2

Se alienta a los autores a controlar la flexibilidad utilizando la abreviatura de flex en lugar de con flex-grow directamente, ya que la abreviatura restablece correctamente los componentes no especificados para acomodar los usos comunes.

https://drafts.csswg.org/css-flexbox/#propdef-flex-grow

.flex-item {
   flex: 1;
}
.big {
   flex: 3;
}

Este es un ejemplo de trabajo

http://codepen.io/anon/pen/VjZYPV

Answer 3

También debe especificar un valor para flex-basis (sin especificar que esta propiedad cause un comportamiento similar al uso del valor inicial, auto ).

Añadir flex-basis: 0; a ambos niños o simplemente ponlo con la shorthand :

.flex-item {
    flex: 1; /* flex-basis is 0 if omitted */
}
.big {
    flex-grow: 3;
}

http://codepen.io/anon/pen/JEcBa