css - end - ¿Qué exactamente establece la propiedad flex-basis?

flexbox generator

Question

¿Hay alguna diferencia entre establecer max-width o width para un elemento flexible en lugar de la flex-basis ?

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

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

Ejemplo: http://jsfiddle.net/wP5UP/ Los últimos dos cuadros tienen la misma flex-basis: 200px , pero solo uno de ellos se mueve hacia abajo cuando la ventana está entre 300px y 400px. ¿Por qué?

Answer 1

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

Sin embargo, no es el punto de ruptura para las propiedades de crecimiento / contracción flexible. El navegador determina cuándo ajustar el elemento en función de si los tamaños iniciales de los elementos superan el ancho del eje transversal (en el sentido convencional, es decir, el ancho).

Basado en tu violín, la razón por la cual el último se mueve por la ventana es porque el ancho del padre ha sido ocupado por los hermanos anteriores, y cuando permites que el contenido se ajuste, los elementos que no encajan en la primera fila se ponen empujado a la fila siguiente. Como flex-grow es un valor distinto de cero, simplemente se estirará para llenar todos los espacios restantes en la segunda fila.

Ver demo violín (modificado del tuyo) .

Si miras el violín, he modificado para que el último artículo tenga una nueva declaración de tamaño:

.size3 {
  flex: 0 1 300px;
}

Se dará cuenta de que el elemento mide 300 px a través de la intención. Sin embargo, cuando modifique la propiedad flex-grow de modo que su valor exceda 0 ( vea el ejemplo ), se estirará para llenar la fila, que es el comportamiento esperado. Dado que en su nuevo contexto de fila no tiene hermanos para comparar, un número entero entre 1 y el infinito no influirá en su tamaño.

Por lo tanto, flex-grow se puede ver así:

• 0 : (valor predeterminado) No estirar . Ya sea de tamaño a ancho de contenido del elemento u obedezca flex-basis .
• 1 : estiramiento .
• ≥2 (número entero n ): Estirar . Será n veces el tamaño de otros elementos con flex-grow: 1 en la misma fila, por ejemplo.