start end basis css css3 flexbox

css - end - flex-start



¿Cuáles son las diferencias entre base flexible y ancho? (3)

Ha habido preguntas y artículos sobre esto, pero nada concluyente por lo que puedo decir. El mejor resumen que pude encontrar es

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

... que en sí mismo no dice mucho sobre el comportamiento de los elementos con un conjunto de bases flexibles . Con mi conocimiento actual de flexbox, no veo por qué eso no podría describir el ancho también.

Me gustaría saber cómo exactamente la base flexible es diferente del ancho en la práctica:

  • Si reemplazo el ancho con base flexible (y viceversa), ¿qué cambiará visualmente?
  • ¿Qué sucede si configuro ambos a un valor diferente? ¿Qué pasa si tienen el mismo valor?
  • ¿Hay algunos casos especiales en los que el uso de ancho o flex-base tendría una diferencia significativa con el uso del otro?
  • ¿Cómo difieren el ancho y la base flexible cuando se usan junto con otros estilos de flexbox, como flex-wrap , flex-grow y flex-shrink ?
  • ¿Alguna otra diferencia significativa?

Edición / aclaración : esta pregunta se ha formulado en un formato diferente en ¿Qué conjuntos de propiedades de base flexible son exactamente? pero sentí que sería mejor una comparación o resumen más directo de las diferencias de base flexible y ancho (o altura ).

Considere flex-direction

Lo primero que viene a la mente al leer su pregunta es que flex-basis no siempre se aplica al width .

Cuando flex-direction es row , flex-basis controla el ancho.

Pero cuando flex-direction es la column , flex-basis controla la altura.

Diferencias clave

Aquí hay algunas diferencias importantes entre flex-basis y el width / height :

  • flex-basis aplica solo a los artículos flexibles. Los contenedores flexibles (que no son también artículos flexibles) ignorarán flex-basis pero pueden usar width y height .

  • flex-basis funciona solo en el eje principal. Por ejemplo, si está en flex-direction: column , la propiedad de width sería necesaria para dimensionar los elementos flexibles horizontalmente.

  • flex-basis no tiene efecto en los artículos flexibles absolutamente posicionados. width propiedades de width y height serían necesarias. Los elementos flexibles ubicados de manera absoluta no participan en el diseño flexible .

  • Al usar la propiedad flex , tres propiedades: flex-grow , flex-shrink y flex-basis - se pueden combinar perfectamente en una declaración. Usando width , la misma regla requeriría múltiples líneas de código.

Comportamiento del navegador

En términos de cómo se representan, no debería haber diferencia entre flex-basis y width , a menos que flex-basis sea auto o de content .

De la especificación:

7.2.3 La propiedad de flex-basis

Para todos los valores que no sean auto y content , flex-basis se resuelve de la misma manera que el width en los modos de escritura horizontal.

Pero el impacto del auto o el content puede ser mínimo o nada en absoluto. Más de la especificación:

auto

Cuando se especifica en un elemento flexible, la palabra clave auto recupera el valor de la propiedad de tamaño principal como la flex-basis utilizada. Si ese valor es auto , el valor utilizado es el content .

auto

Indica el tamaño automático, en función del contenido del elemento flexible.

Nota: Este valor no estaba presente en la versión inicial de Diseño de caja flexible y, por lo tanto, algunas implementaciones anteriores no lo admitirán. El efecto equivalente se puede lograr usando auto junto con un tamaño principal ( width o height ) de auto .

Entonces, de acuerdo con las especificaciones, flex-basis y el width resuelven de manera idéntica, a menos que flex-basis sea auto o de content . En tales casos, flex-basis puede usar el ancho del contenido (que, presumiblemente, la propiedad del width usaría también).

El factor de flex-shrink

Es importante recordar la configuración inicial de un contenedor flexible. Algunas de estas configuraciones incluyen:

  • flex-direction: row : los elementos flexibles se alinearán horizontalmente
  • justify-content: flex-start : los elementos flexibles se apilarán al comienzo de la línea en el eje principal
  • align-items: stretch : los elementos flexibles se expandirán para cubrir el tamaño transversal del contenedor
  • flex-wrap: nowrap : los elementos flexibles se ven obligados a permanecer en una sola línea
  • flex-shrink: 1 - un elemento flexible puede encogerse

Tenga en cuenta la última configuración.

Debido a que los elementos flexibles pueden reducirse de forma predeterminada (lo que evita que desborden el contenedor), la flex-basis / width / height especificada puede anularse.

Por ejemplo, flex-basis: 100px o width: 100px , junto con flex-shrink: 1 , no será necesariamente 100px.

Para representar el ancho especificado, y mantenerlo fijo , deberá desactivar la reducción:

div { width: 100px; flex-shrink: 0; }

O

div { flex-basis: 100px; flex-shrink: 0; }

O, según lo recomendado por la especificación:

flex: 0 0 100px; /* don''t grow, don''t shrink, stay fixed at 100px */

7.2. Componentes de flexibilidad

Se alienta a los autores a controlar la flexibilidad utilizando la taquigrafía flex lugar de sus propiedades de mano larga directamente, ya que la taquigrafía restablece correctamente cualquier componente no especificado para acomodar usos comunes .

Errores del navegador

Algunos navegadores tienen problemas para dimensionar elementos flexibles en contenedores flexibles anidados.

flex-basis ignorada en un contenedor flexible anidado. width obras.

Cuando se utiliza flex-basis , el contenedor ignora el tamaño de sus elementos secundarios y los elementos secundarios desbordan el contenedor. Pero con la propiedad de width , el contenedor respeta el tamaño de sus elementos secundarios y se expande en consecuencia.

Referencias

Ejemplos:

elementos flexibles utilizando flex-basis y white-space: nowrap contenedor de desbordamiento inline-flex . width obras.

Parece que un contenedor de flex configurado inline-flex en inline-flex no reconoce flex-basis en un niño al representar un hermano con white-space: nowrap (aunque podría ser un elemento con un ancho indefinido). El contenedor no se expande para acomodar los artículos.

Pero cuando se utiliza la propiedad width lugar de flex-basis , el contenedor respeta el tamaño de sus elementos secundarios y se expande en consecuencia. Esto no es un problema en IE11 y Edge.

Referencias

  • el ancho del contenedor flexible en línea no crece
  • El contenedor flexible en línea (display: inline-flex) está expandiendo todo el ancho del contenedor principal

Ejemplo:

Errores que afectan a IE 10 y 11:

Además del excelente resumen de Michael_B, vale la pena repetir esto:

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

La parte importante aquí es inicial .

Por sí mismo, esto se resuelve en ancho / alto hasta que las otras propiedades de crecimiento / contracción de flexión entran en juego.

Asi que. un niño con

.child { flex-basis:25%; flex-grow:1; }

inicialmente tendrá un ancho del 25%, pero luego se expandirá de inmediato lo más que pueda hasta que se tengan en cuenta los otros elementos. Si no hay ninguno ... será 100% ancho / alto.

Una demostración rápida:

.flex { width: 80%; margin: 1em auto; height: 25px; display: flex; background: rebeccapurple; } .child { flex-basis: auto; /* default */ background: plum; } .value { flex-basis: 25%; } .grow { flex-grow: 1; }

<div class="flex"> <div class="child auto">Some Content</div> </div> <div class="flex"> <div class="child value">Some Content</div> </div> <div class="flex"> <div class="child grow">Some Content</div> </div>

Experimentar con flex-grow , flex-shrink y flex-basis (o la abreviatura flex :fg fs fb ) ... puede dar algunos resultados interesantes.

Posiblemente el punto más importante para agregar:

¿Qué pasa si el navegador no admite flex ? En tal caso, el width/height toma el control y se aplican sus valores.

Es una muy buena idea, casi esencial, definir el width/height de los elementos, incluso si tiene un valor completamente diferente para flex-basis . Recuerde probar deshabilitando la display:flex y vea lo que obtiene.