Se encuentra usted aquí

Mozilla Hispano

Suscribirse a canal de noticias Mozilla Hispano Mozilla Hispano
Tu comunidad en español de Mozilla
Actualizado: hace 9 horas 9 mins

Nuevas guías sobre flexbox en MDN

Dom, 06/03/2018 - 17:51

Esta es una traducción del artículo original publicado en el blog de Hacks.

En preparación para incluir CSS Grid en los navegadores en marzo de 2017, Rachel Andrew trabajó en un número de guías y materiales de referencia para la especificación de CSS Grid, que fueron publicadas en la MDN. Con ese material actualizado, pensamos que sería bueno completar la documentación con guías similares para Flexbox, y asi actualizar el material existente para reflejar los casos de uso centrales de Flexbox.

Esto funciona bien; con el actual estado de la especificación, Flexbox ahora se sienta al lado de Grid y Box Alignment para formar una nueva forma de pensar sobre el diseño para la web. Es útil reflejar esto en la documentación.

La nueva documentación de un vistazo

Se han agregado ocho nuevas guías a MDN:

Una de las cosas que se ha intentado hacer en crear este material mostrar a Flexbox como parte de un sistema de diseño global. Antes de Grid, Flexbox fue visto como la especificación para resolver todos los problemas de diseño. Sin embargo, gran parte de la dificultad de usar Flexbox es cuando intentamos usarlo para crear el tipo de diseños bidimensionales para los que Grid está diseñado. Una vez más, nos encontramos luchando para persuadir a un método de diseño para que haga cosas para las que no fue diseñado.

Por lo tanto, estas guías están centradas en los casos de uso reales de Flexbox, analizándose en dónde debería usarse Grid en su lugar y también se aclara cómo funciona la especificación con los modos de escritura (Writing Modes), la alineación de cuadros (Box alignment) y ordenamiento de elementos.

Un plan de estudios para el diseño

Nos preguntan sobre si es mejor aprender primero Flexbox y luego pasar a Grid Layout. Se sugiere aprender los conceptos básicos de cada especificación y las razones para usar cada método de diseño. En la etapa de producción, es probable que tengas algunos patrones que den sentido para diseñar usando Flexbox y algunos usando Grid.

En MDN puedes empezar con Conceptos Básicos de flexbox junto con el artículo complementario para Grid — Conceptos básicos de grid layout. A continuación, echa un vistazo a los dos artículos que detallan cómo Flexbox y Grid encajan en la imagen general de diseño de CSS:

Después de haber trabajado con estas guías, tendrás una visión general razonable. Cuando empieces a crear patrones de diseño usando las especificaciones, puedes profundizar en las guías más detalladas para cada especificación.

Similitudes entre Flexbox y Grid

Cuando estudies Flexbox y Grid, descubrirás que hay muchas similitudes entre las especificaciones. Esto es por diseño; encontrarás esta nota en la especificación Grid:

“Si observas alguna incoherencia entre este módulo de Grid Layout y el módulo de Flexible Box Layout, por favor repórtala al CSSWG ya que es probable que se trate de un error.”

Las Propiedades de Box Alignment que son parte de la especificación Flexbox han sido movidas dentro de su propia especificación — Box Alignment Level 3. Grid usa esa especificación como una referencia en lugar de duplicar las propiedades. Esto significa que deberías encontrar la información sobre Alineación de elementos en un contenedor flexible muy similar a la que encontrada en Alineación de Cajas en Grid Layout. De muchas maneras, el alineamiento es fácil de entender cuando se trabaja con Grid Layout ya que siempre tienes los dos ejes en juego.

Este movimieto de propiedades de Flexbox a Grid también funciona en la otra dirección. En Grid tenemos la propiedad grid-gap, representando un atajo para establecer grid-column-gap y grid-row-gap. Durante el transcurso de este año estas serán movidas a la especificación Box Alignment también, y renombrado a gap, column-gap y row-gap. Una vez que los navegadores implementen estas para Flexbox, seremos capaces de tener separadores en Flexbox como lo hacemos con Grid, en lugar de necesitar que usar márgenes para crear espacio entre los elementos.

Soporte de navegadores paara flexbox

Flexbox tiene un excelente soporte en navegadores en este momento. Se han detallado las cosas a tener en cuenta en la compatibilidad con versiones anteriores de flexbox. Actualmente, los problemas tienden a estar en las versiones anteriores de los navegadores que admitían versiones anteriores de la especificación bajo los prefijos de los creadores. Los problemas están bien documentados en este momento en la guía de MDN y en el sitio Flexbugs, que detalla los problemas de interoperabilidad y soluciones para ellos.

Las especificaciones Flexbox y Grid están juntas ahora en estado de Candidato a Recomendación. No esperamos que haya grandes cambios en las especificaciones en este momento. Debes tener confianza en aprender e integrar Flexbox y Grid en sitios web de producción.

Pasando a un nuevo modelo de pensamiento sobre el diseño

Con Flexbox y Grid, más las especificaciones relacionadas de Box Alignment y Writing Modes (modos de escritura), tenemos nuevos modelos para la web, que han sido diseñados para permitir los tipos de diseño que necesitamos crear. Aquellos de nosotros que hemos luchado con elementos flotantes para crear diseños por años tenemos que cambiar nuestro pensamiento para realmente aprovechar lo que ahora es posible, en lugar de intentar forzarlo a regresar a lo que es familiar. Ya sea que estés interesado en implementar más diseños creativos, o simplemente para optimizar el desarrollo de interfaces de usuario complejas, esperamos que los materiales que hemos creado te ayuden a obtener una comprensión muy completa de estas especificaciones.

Categorías: Noticias