¿Qué conjuntos de propiedades flex-basis exactamente?

Question

¿Qué conjuntos de propiedades flex-basis exactamente?

¿Hay una diferencia entre ajustar max-width o width a un elemento flexible en lugar del flex-basis?

¿Es el "punto de ruptura" para las propiedades flex-grow/shrink?

Y cuando establezco flex-wrap: wrap ¿cómo decide el navegador en qué punto bajar el elemento a una nueva línea? ¿Está de acuerdo con su ancho o 'base flexible'?

Ejemplo: http://jsfiddle.net/wP5UP / Las dos últimas cajas tienen el mismo flex-basis: 200px, sin embargo solo uno de ellos se mueve hacia abajo cuando la ventana está entre 300px y 400px. ¿Por qué?

41

css css3 flexbox

Author: ilyo, 2014-05-09

Source

1 answers

score 39 · Accepted Answer

flex-basis le permite especificar el tamaño inicial / inicial del elemento, antes de que se calcule cualquier otra cosa. Puede ser un porcentaje o un valor absoluto.

Es, sin embargo, no el punto de ruptura para las propiedades flex-grow/shrink. El navegador determina cuándo envolver el elemento sobre la base de si los tamaños iniciales de los elementos exceden el ancho del eje transversal (en el sentido convencional, es decir, el ancho).

Basado en su violín, la razón por la que el último los movimientos hacia abajo de la ventana se deben a que el ancho del padre ha sido completamente ocupado por los hermanos anteriores, y cuando permite que el contenido se ajuste, los elementos que no caben en la primera fila se empujan a la fila posterior. Dado que flex-grow es un valor distinto de cero, simplemente se estirará para llenar todos los espacios que queden en la segunda fila.

Ver demo fiddle (modificado del suyo) .

Si nos fijamos en el violín, he modificado para que el último elemento tenga un nuevo tamaño declaración:

.size3 {
  flex: 0 1 300px;
}

Te darás cuenta de que el elemento mide 300px según lo previsto. Sin embargo, cuando se modifica la propiedad flex-grow de manera que su valor exceda 0 (ver ejemplo), se estirará para llenar la fila, que es el comportamiento esperado. Dado que en su contexto de nueva fila no tiene hermanos con los que comparar, un entero entre 1 y infinito no influirá en su tamaño.

Por lo tanto, flex-grow se puede ver como esto:

0: (Predeterminado valor) no estirar. Tamaño al ancho de contenido del elemento, u obey flex-basis.
1: Stretch .
≥2 (integer n): Stretch . Será n veces el tamaño de otros elementos con flex-grow: 1 en la misma fila, por ejemplo.