La diferencia entre ancho y base flexible en Flexbox

Entender las partes extrañas

Cuando comencé a aprender Flexbox, lo que más me llamó la atención fue "¿Por qué agregaron esta base flexible?" Quiero decir, tengo ancho ... ¿Por qué también hay una base flexible?

"Restricción dinámica"

Leí varios artículos sobre el tema. Todo lo cual reclamaba alguna diferencia entre ancho y base flexible. Sin embargo, ninguno de los cuales explicaba completamente cuál se suponía que era la diferencia.

Después de mucha experimentación y algunos cambios de moda, llegué a la conclusión de que el propósito principal de la base flexible era proporcionar una restricción "dinámica". Sin embargo, ¿qué quiero decir exactamente con eso? Una restricción "dinámica".

Supongo que ya está familiarizado o al menos familiarizado con CSS y Flexbox.

No entraré en detalles sobre CSS o Flexbox que le enseñarán los conceptos centrales de cualquiera de ellos.

Necesito saber

También utilizaré SCSS, no CSS nativo, y el método "Bloque-Elemento-Modificador (BEM)". La razón de esto es que creo que es más fácil ser conciso de esta manera. Por lo tanto, deberá comprender los conceptos básicos de SCSS y anidación, BEM debe ser autodescriptivo en los ejemplos.

El objetivo de este artículo es simplificar el enigma que parece existir en Internet en relación con la base flexible. A menudo he visto la respuesta “se usa la base flexible en lugar de la anchura” como respuesta a su propósito. Por supuesto, esto es totalmente aceptable para la mayoría de los casos, aunque es posible utilizarlo de formas más avanzadas. Parece que el potencial de la base flexible ha eludido a muchos desde hace algún tiempo (por supuesto que no a todos), pero me atrevo a decir que muchos .

Quiero intentar convencerlo en este artículo de que la base flexible de Flexbox no reemplaza el ancho (o alto) . Es una herramienta completamente nueva con su propio conjunto de posibilidades.

La carne y las patatas

Así que ahora he dicho estas cosas… La siguiente parte es explicar y mostrar exactamente de qué estoy hablando aquí. Como sabrá, cuando trabaje con flex-box, puede usar flex-base en lugar de ancho.

Ejemplos visuales

En el ejemplo anterior, tenemos un elemento "interno" que vivirá dentro del "elemento" externo. El elemento exterior es nuestro Flexbox y el interior tiene una base flexible de 400px.

El HTML de lo anterior podría verse así:

El resultado es un cuadro gris de exactamente 400 px de ancho por 250 px de alto en el centro de nuestra pantalla así:

En el ejemplo anterior, nuestro contenedor .elemento , se establece automáticamente en una dirección flexible que es una fila (de izquierda a derecha) y no una columna (de arriba a abajo). Recuerda eso. Pronto lo cambiaremos a columna y podrá ver de qué se trata todo este artículo. Esa naturaleza dinámica de la base flexible de Flexbox.

Seamos "dinámicos"

Así que cambiemos el código para mostrar esa "naturaleza dinámica". Para hacer esto, todo lo que tenemos que hacer es cambiar el elemento externo para que tenga una ( dirección flexible: columna ) y cambiar la altura al ancho en el elemento interno (html no cambia).

Cambiar la dirección de flexión cambia la dirección en la que afectará la base de flexión. Por tanto, la base flexible es tanto la anchura como la altura. En el ejemplo anterior, la base flexible ahora dará como resultado que el bloque tenga una altura de 400 px frente al rectángulo de 400 px de ancho que vimos antes.

Si quieres jugar con este código tú mismo, aquí tienes un codepen con el código anterior.

Observación

Observe cómo en el primer ejemplo, la base flexible está asumiendo el rol de ancho, y en el segundo ejemplo, el rol de altura. Flex-base es tanto ancho como alto en una Flexbox, dependiendo de la dirección de flexión. ¡Muy genial!

Comprensión más profunda / Mejores prácticas

Estas son algunas de las cosas más importantes que he aprendido sobre la base flexible durante mi uso de la base flexible de Flexbox.

  • Controles de base flexible ya sea "ancho" o "altura" según la dirección de flexión
  • La base flexible anulará cualquier otro ancho: o alto: propiedades si se declara específicamente algo diferente a la base flexible: auto (auto por defecto)
  • La forma abreviada de base flexible es (flex: $ grow, $ shrink, $ size) y se establece en (flex: 0 1 auto ) de forma predeterminada.
  • Cuando la base flexible se establece en automático , primero verifica una propiedad de ancho o alto (según la dirección) si no hay ninguna , usa el tamaño del contenido de los elementos
  • La base flexible seguirá obedeciendo a cualquier configuración de ancho mínimo / máximo: o altura. Nuevamente, se basa en la dirección flexible:
  • La base flexible en una columna anula la altura:, esto es importante porque aunque width: obedecerá a flex-shrink, height: no lo hará. (Esto puede causar resultados confusos e inesperados en su diseño).

Importante tener en cuenta

Observe cómo auto está en negrita. De forma predeterminada, si tiene un ancho establecido y no declaró un valor de base flexible, el ancho funcionará normalmente en ese elemento. No hay diferencia entre cómo funcionará la base flexible: en su elemento y cómo funcionará el ancho: en su elemento. El ancho incluso obedecerá al encogimiento flexible cuando se usa Flexbox.

El factor divergente entre el ancho y la base flexible es la capacidad dinámica de la base flexible para cambiar su dirección efectiva en función de la dirección flexible.

La advertencia

altura: por otro lado, actúa de forma un poco diferente. La propiedad height no obedece a flex-shrink de la misma manera que lo hace el ancho. Cuando use la columna de dirección flexible , siempre debe usar la base flexible para controlar dinámicamente el tamaño de su Flexbox para que tenga resultados consistentes y esperados.

También tome nota especial del punto número 4 :

  • Cuando la base flexible se establece en automático , primero verifica una propiedad de ancho o alto (según la dirección) si no hay ninguna , usa el tamaño del contenido de los elementos

Esto significa que la base flexible ajustará automáticamente el tamaño del elemento en función del tamaño del contenido (el tamaño del elemento interno) cuando se establezca en base flexible: auto. Solo si no hay un ancho: o un alto: establecido en el elemento.

Mejores prácticas

Recomiendo que cuando pueda, como práctica recomendada, utilice la base flexible sobre el ancho o el alto, de esta manera sus resultados siempre serán consistentes. Teniendo en cuenta que width: obedecerá a flex-shrink y esa altura: no, comprenda que puede haber diferencias dramáticas entre cómo funcionarán el ancho y la altura en un Flexbox cuando usa otras propiedades de Flexbox en conjunto, como flex-wrap, por ejemplo. También use la abreviatura de flex por conveniencia, consistencia y legibilidad.

La abreviatura de flex-base es (flex: $ grow, $ shrink, $ size) y se establece en (flex: 0 1 auto ) de forma predeterminada.

flex: 0 1 200px;

Hay algunos casos en los que es posible que deba usar el ancho o el alto en lugar de la base flexible. Algunos casos pueden incluir soluciones para errores de Flexbox. Un buen recurso sobre ese tema es Flexbugs. Flexbugs también es un buen lugar para determinar otras mejores prácticas en función de los navegadores que desea admitir.

Recursos adicionales

En el siguiente ejemplo de codepen , muestro flex-wrap para demostrar un ejemplo visual de la información anterior de este artículo.

Utilice este codepen y revise detenidamente el código. Verá cómo solo estoy usando la base flexible una vez en todo el código base para controlar múltiples escenarios. Este es solo un pequeño ejemplo de posibles casos de uso.

Conclusión

Saber que la base flexible es tanto una restricción de ancho como de altura es una buena herramienta. Es dinámicamente desplazable. Utilizando la base flexible, puede crear algunos elementos de diseño muy intuitivos. Algunos incluso pueden cambiar durante el cambio de dirección flexible de un Flexbox en un punto de interrupción crucial en su diseño, con suerte, brindándole una solución más limpia. Este conocimiento también debería ayudarlo a diseñar mejor y con más confianza con Flexbox, ya que esta funcionalidad es clave para usar Flexbox en su máximo potencial.

Si cree que hay algo que me perdí, encontré un error tipográfico, etc., ¡hágamelo saber!

Espero que este breve y dulce artículo le haya resultado útil a alguien. Si apreció el esfuerzo invertido, ¡aplauda el artículo! ?

Ponerse en contacto ?

Si desea hablar de compras, el mejor lugar para vincularse conmigo es en linkedin o comunicándose conmigo a través de mi sitio web.

Haré todo lo posible para responder a cualquier comentario o pregunta aquí en Medium.

Si haces lo social: Instagram o Facebook.

Créditos de las fotografías: (Cascada | Jared Erondu) (Chatter | Dan Wayman) (Descargo de responsabilidad | Pop & Zebra) (Objetivo | Olav Ahrens Røtne) y (Vamos | Goh Rhy Yan). Todas las fotos de Unsplash.com