css - bootstrap - flexbox grid

¿En qué circunstancias se aplica flex-encogimiento a los elementos flexibles y cómo funciona?

Question

He jugado con esta bonita página de demostración de CSS Flexbox y entiendo la mayoría de los conceptos, sin embargo, no pude ver flex-shrink en el trabajo. Cualquiera que sea la configuración que aplique allí, no veo diferencia en la página.

De la spec :

<''flex-grow''>

Este componente establece ''flex-grow'' a mano y especifica el factor de crecimiento flexible, que determina cuánto crecerá el elemento flexible en relación con el resto de los elementos flexibles en el contenedor flexible cuando se distribuya espacio libre positivo. Cuando se omite, se establece en ''1''.

<''flex-shrink''>

Este componente establece el encogimiento flexible a mano y especifica el factor de contracción flexible, que determina cuánto se encogerá el elemento flexible en relación con el resto de los elementos flexibles en el contenedor flexible cuando se distribuye el espacio libre negativo. Cuando se omite, se establece en ''1''. El factor de contracción flexible se multiplica por la base flexible cuando se distribuye el espacio negativo.

¿En qué circunstancias se aplicará el flex-shrink (es decir, cuando se distribuya el espacio negativo)? He intentado una página personalizada con anchos de ajuste en el elemento de FlexBox y (min) ancho de los elementos que contiene para hacer un desbordamiento, pero parece que no es el caso descrito.

¿Ya está soportado?

Como solución, se apreciará mucho un conjunto de opciones en la demo vinculada o una demostración en vivo similar a JSFiddle.

Answer 1

Para ver flex-shrink en acción, debe poder flex-shrink su contenedor.

HTML:

<div class="container">
  <div class="child one">
    Child One
  </div>

  <div class="child two">
    Child Two
  </div>
</div>

CSS:

div {
  border: 1px solid;
}

.container {
  display: flex;
}

.child.one {
  flex: 1 1 10em;
  color: green;
}

.child.two {
  flex: 2 2 10em;
  color: purple;
}

• http://jsfiddle.net/GyXxT/ (sin prefijo - construcción nocturna Opera o Firefox)
• jsfiddle.net/GyXxT/1 (webkit)

En este ejemplo, idealmente, ambos elementos secundarios quieren tener una anchura de 10 em. Si el elemento principal tiene más de 20em de ancho, el segundo hijo tomará el doble del espacio sobrante que el primer hijo, lo que lo hará parecer más grande. Si el elemento principal tiene menos de 20m de ancho, entonces el 2º hijo tendrá el doble de afeitado que el primer hijo, lo que lo hará parecer más pequeño.

Soporte de flexbox actual: Opera (no prefijado), Chrome (prefijado), IE10 (prefijado, pero usa nombres / valores de propiedad ligeramente diferentes). Firefox actualmente usa las especificaciones antiguas de 2009 (con prefijo), pero se supone que la nueva especificación estará disponible en versiones experimentales en este momento (sin prefijo).