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 brinda los medios para construir cuadrículas que son flexibles y conscientes del contenido dinámico y, por lo tanto, nos da la libertad de concentrarnos en el proceso de creación en lugar de abrirnos camino hacia un diseño.

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

Lectura adicional en SmashingMag:

• Diseño de diseños con Flexbox
• Centrado Horizontal y Vertical con CSS y Flexbox
• Consultas de cantidad con CSS y Flexbox
• Módulos de interfaz de usuario (menúes desplegables, pies de página fijos, etc.)
• Módulos Flexbox para aplicaciones web

Empezando

Uso de Flexbox hoy

Un excelente manual sobre el poder de Flexbox y cómo usarlo es el artículo de Chris Wright "Using Flexbox Today". Como señala Chris, existe una clara brecha entre lo que construimos hoy y cómo abordaremos el mañana. Entonces, para lograr que más personas usen Flexbox hoy, describe una estrategia para agregar su 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 fijados, periódicos y bloques de anuncios, diseños de varias columnas, así como tableros.

Aprende Flexbox de forma divertida

Honestamente, a pesar de (¿o debido a?) su gran potencial, Flexbox puede ser bastante desalentador 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 ranita a su nenúfar.

Consejos y trucos prácticos

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

Resuelto por Flexbox

Piense en todas esas cosas que los piratas informáticos de CSS han tratado de resolver durante años: el diseño del Santo Grial, pares de entrada fluidos de ancho completo, objetos de medios que funcionan sin ningún desbordamiento, corrección clara o hacks de formato de bloque, pies de página que se adhieren a la parte inferior incluso de páginas escasamente contenidas, centrado vertical; bueno, Flexbox resuelve todo esto, para siempre y sin trucos. Philipp Walton ha compilado una muestra de estos desafíos y sus soluciones Flexbox. Genial para tener a mano para su próximo proyecto.

Creación de cuadrículas refinadas

En el corazón de Flexbox está su capacidad para producir cuadrículas envolventes que toleran el contenido dinámico. Puede usar técnicas básicas de envoltura para distribuir niños automáticamente en una cuadrícula y, por lo tanto, tener un diseño decente sin importar la cantidad de niños. Las consultas de elementos ayudan a que sus cuadrículas respondan por completo con niños que se expanden para alcanzar un ancho mínimo, y la posibilidad de reorganizar los elementos en la cuadrícula garantiza que una cuadrícula nunca termine con una sola fila de elementos.

Flexbox y consultas de cantidad

Aaron Gustafson experimentó con Flexbox y consultas de cantidad para crear 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.

Ajuste de cambio de alineación

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

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

Anulando 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.

Reimaginando patrones de interfaz de usuario con Flexbox

Que el poder de Flexbox va más allá de las tareas comunes de diseño, muestra un 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 clasificación por 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 propiedad flex-flow y row-reverse . ¡Hábil!

Flexbox Patterns de CJ Cenizal también muestra formas de usar el poder de Flexbox para crear 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 de formularios, indicaciones centradas, barras laterales y más.

Herramientas y recursos adicionales

Cálculo del ancho de los elementos flexibles

Si calcular el ancho de los elementos flexibles le causa dolores de cabeza, entonces Flexbox Tester es para usted. Simplemente ingrese valores para flex-grow , flex-shrink y flex-basis para tres elementos flexibles para ver cómo se comportan.

Tratar con errores y soluciones alternativas

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 solucionarlo. La lista seleccionada por la comunidad de problemas de Flexbox se actualiza periódicamente para proporcionar soluciones y alternativas del navegador. Si descubre un error que aún no aparece en la lista, puede informarlo a través de GitHub. Hablando de soluciones alternativas del navegador: Flexibility polyfill proporciona una solución para las 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 acerca de sus recursos favoritos de Flexbox en la sección de comentarios a continuación.