Krypton Solid

La lista de lectura de Flexbox: técnicas y herramientas

La lista de lectura de Flexbox: técnicas y herramientas

Flexbox nos brinda un nuevo tipo de control sobre nuestros diseños, lo que hace que los desafíos de codificación que eran difíciles o imposibles de resolver solo con CSS sean sencillos e intuitivos. Nos proporciona los medios para construir rejillas que son flexibles y conscientes del contenido dinámico, y por lo tanto, nos dan la libertad de centrarnos en el proceso de creación en lugar de abrirnos camino hacia un diseño.

Para darle una ventaja en Flexbox y brindarle ideas sobre cómo usarlo para dominar los desafíos comunes de codificación, hemos recopilado consejos, trucos y herramientas que lo ayudan a aprovechar al máximo su poder ya hoy. La lista no está completa de ninguna manera, pero incluye los recursos que encontramos útiles y útiles.

Otras lecturas en SmashingMag:

Empezando

Uso de Flexbox hoy

Un gran manual sobre el poder de Flexbox y cómo usarlo, es el artículo de Chris Wright «Uso de Flexbox hoy. » Como señala Chris, existe una clara brecha entre lo que construimos hoy y cómo nos enfocaremos mañana. Entonces, para que más personas usen Flexbox hoy, describe una estrategia para agregar valor a sus proyectos y proporciona ejemplos de cómo mejorar los diseños actuales con Flexbox, entre ellos diseños de tarjetas, diseños de pantalla dividida, diseños anclados, periódicos y bloques de anuncios, diseños de varias columnas y paneles de control.

Flexbox en la naturaleza en los bloques de anuncios y el periódico de The Guardian. Uno de los ejemplos en La publicación de Chris Wright sobre Flexbox. (Credito de imagen: Chris Wright)

Aprenda Flexbox de la manera divertida

Honestamente, a pesar de (¿o debido a?) Su gran potencial, Flexbox puede ser bastante abrumador si está a punto de comenzar. Una forma divertida de comprender sus propiedades y elementos es Flexbox Froggy, un juego de navegador que te enseña los conceptos básicos de Flexbox usándolo para guiar a una pequeña rana a su nenúfar.

Trucos y consejos prácticos

¿Ha comprendido los conceptos básicos de Flexbox y está listo para sumergirse más profundamente? Los siguientes recursos brindan soluciones prácticas para desafíos comunes de codificación.

Resuelto por Flexbox

Piense en todas esas cosas que los piratas informáticos de CSS han intentado resolver durante años: el diseño del Santo Grial, pares de entrada fluidos de ancho completo, objetos multimedia que funcionan sin ningún desbordamiento, trucos de formateo de bloques o correcciones claras, pies de página que se pegan al final incluso de páginas escasamente satisfechas, centrado vertical – bueno, Flexbox resuelve todo esto, de una vez por todas y sin cortes. Philipp Walton ha compilado un escaparate de estos desafíos y sus soluciones Flexbox. Genial para tener a mano para su próximo proyecto.

Creación de cuadrículas definidas

En el corazón de Flexbox está su capacidad para producir cuadrículas envolventes que son tolerantes al contenido dinámico. Puede utilizar técnicas básicas de envoltura para distribuir a los niños automáticamente en una cuadrículay, por lo tanto, ofrecer un diseño decente sin importar el número de niños. Las consultas de elementos ayudan a que sus cuadrículas respondan completamente con los niños se expanden para alcanzar un ancho mínimo, y la posibilidad de reorganizar los elementos en la cuadrícula garantiza que un la cuadrícula nunca termina con una fila de un solo elemento.

Consultas de Flexbox y cantidad

Aaron Gustafson experimentó con Flexbox y consultas de cantidad para llegar a un diseño de cuadrícula flexible con mejoras visuales. En el caso de Aaron, el diseño de la cuadrícula se flexiona para resaltar una o dos de sus próximas apariciones como orador y permite que otros fluyan con el tamaño de cuadrícula predeterminado. También es una buena idea para una página de cartera o publicaciones de blog recientes, por ejemplo.

Diseño de cuadrícula flexible de Aaron Gustafson
Diseño de cuadrícula flexible de Aaron Gustafson en acción. Ver la versión grande.

Envoltura de cambio de alineación

Imagine el siguiente problema: tiene un título principal y un subtítulo en la misma línea. Desea que el título principal esté a la izquierda, el subtítulo alineado a la derecha y el subtítulo debe ajustarse debajo del título principal cuando no hay suficiente espacio.

Envoltura de cambio de alineación
La mayoría de las veces, los problemas de alineación son fáciles de resolver con Flexbox. Ver la versión grande.

Esa es la situación en la que se encontró Chris Coyier. Su técnica de envoltura de cambio de alineación resuelve el problema dando al título un contenedor flexible con display:flex; y el título en sí flex-grow: 1;, por lo que el subtítulo se desplaza hacia la derecha. Y dado que los contenedores flexibles se pueden envolver, solo se necesita un flex-wrap: wrap; para que el subtítulo se comporte según lo previsto en pantallas pequeñas. Uno de esos momentos en los que Flexbox se destaca por hacer que algo difícil sea increíblemente simple. También se aplica a otros desafíos de diseño receptivo.

Primordial justify-content

Uno de los secretos mejor guardados de Flexbox es probablemente cómo anular justify-content para colocar un elemento flexible de forma independiente a lo largo del eje principal. La solución: márgenes automáticos! No son nuevos en CSS, por supuesto, pero en combinación con Flexbox revelan un poder completamente nuevo. Cuando se aplica a un elemento flexible, el elemento extenderá automáticamente su margen especificado para ocupar el espacio adicional en el contenedor flexible según la dirección en la que se aplique el margen automático.

Re-imaginando patrones de interfaz de usuario con Flexbox

Que el poder de Flexbox va más allá de las tareas de diseño comunes, muestra una experimento de Zell Liew. Usó Flexbox para volver a imaginar un patrón de interfaz de usuario que encontrará en todas partes: el elemento de calificación de estrellas. Su versión Flexbox se las arregla con solo 50 líneas de código y cinco estrellas en SVG y cobró vida usando una combinación del selector de hermanos. ~, la flex-flow propiedad y row-reverse. ¡Hábil!

Patrones Flexbox por CJ Cenizal también muestra formas de usar el poder de Flexbox para construir componentes de interfaz de usuario. Proporciona ejemplos interactivos y el código fuente que necesitará para comenzar con entradas paso a paso, pestañas, pies de página, mensajes centrados, barras laterales y más.

Herramientas y otros recursos

Calcular el ancho de los elementos flexibles

Si calcular el ancho de los elementos flexibles le da dolores de cabeza, entonces Probador de Flexbox es para ti. Solo ingrese valores para flex-grow, flex-shrink y flex-basis por tres elementos flexibles para ver cómo se comportan.

Lidiar con errores y soluciones

Como cualquier técnica, Flexbox no está libre de errores, por supuesto. Para esos momentos en los que te encuentras con uno, Flexbugs está destinado a proporcionar una solución. La lista de problemas de Flexbox seleccionada por la comunidad se actualiza periódicamente para proporcionar soluciones y soluciones alternativas para el navegador. Si descubre un error que aún no está en la lista, puede informarlo a través de GitHub. Hablando de soluciones alternativas del navegador: Polyfill de flexibilidad proporciona una solución para versiones anteriores de Internet Explorer que no son compatibles con Flexbox. Detecta elementos afectados por flexión en la página y los rediseña en consecuencia en IE 8 y 9.

¿Tienes algo que añadir a la lista? Háganos saber sobre sus recursos favoritos de Flexbox en la sección de comentarios a continuación.

Deja un comentario