Arrieros somos: una recua de recursos para dominar al Flexbox (IV) 4.12.15
Corregido y Ampliado
Recopilación de recursos, artículos, herramientas, generadores... para dominar y usar el flexbox o modelo Css de caja flexible. Para que no tengas excusas para emplearlo ya, porque razones no hay. Este listado se irá ampliando.
Arrieros somos: una recua de recursos para dominar al Flexbox (IV)
Año 2015. Nueva entrega de la serie Arrieros somos y por las redes carreteamos
. Y nada mejor que hacerlo listando la mejor recopilación sobre el Flexbox que sea capaz de hacer.
Porque ya no hay razón para que no lo emplees en tus realizaciones. Excusas puede que encuentres todas las que quieras, pero razones ni una.
Esta recopilación no la cierro con la publicación del artículo. Es mi intención irla ampliando con el objetivo de que sea una guía útil y de referencia cuando necesites ese dato sobre el modelo de caja flexible de Css, en corto, el flexbox.
Publicada inicialmente en Enero de 2015 la corrijo y amplio en Diciembre de 2015.
Te recomiendo la guardes en tus marcadores y la compartas entre tus conocidos:
Twitter | Google+ | Facebook | Pinterest | Menéalo | LinkedIn
A modo de introducción
Dudo que ha estas alturas haya quien necesite explicaciones sobre qué es el modelo de caja flexible o flexbox en Css y la ruptura que ha supuesto con el modelo tradicional. Pero si necesitas algo de información previa, en español, puedes ver estos dos artículos de este blog sobre ello:
- El modelo de caja flexible (flexbox) en Css3
- Flexible box model o modelo flexible de caja. Su layout
Estos dos post son demasiado veteranos y en algunos aspectos puede que hayan quedado obsoletos. Los incluyo por las definiciones, vocabulario propio del flexbox y las novedades que introduce este desarrollo respecto a módulos de Css anteriores.
La recua de recursos para dominar y usar el flexbox.
Ahora sí. Vamos con la recopilación:
CSS Flexible Box Layout Module Level 1
- El documento del consorcio W3c que describe y desarrolla el modelo de caja flexible o flexbox.
A Complete Guide to Flexbox
- Por Chris Coyier en css-tricks.com Guía obligada y de referencia, súmamente conocida, para conocer las propiedades del grupo flex. Cada una de ellas y sus valores posibles está ilustrada con gráficos.
Flexbox Cheatsheet Cheatsheet
- Similar al anterior, explica el efecto de las diferentes propiedades y sus valores mediante ilustraciones. Cuenta, como valor añadido, con la posibilidad de acceder la guía en versión .pdf.
Flexbox | Codrops CSS Reference
- La entrada correspondiente al flexbox en la referencia de Codrops sobre Css. Por Sara Soueidan
Don't use flexbox for overall page layout
- Un poco de discrepancia nunca está de más frente a tanta loa al flexbox. Artículo un poco veterano (02/2014) de Jake Archibald.
Getting Dicey With Flexbox
- Artículo de Landon Schropp en el blog de David Walsh. Toda la potencia del Flexbox (doble centrado, distribución, reordenación de ítems...) explicada tomando como base las fichas del juego del dominó.
See the Pen Flexbox Dice by Landon Schropp (@LandonSchropp) on CodePen.
Un usuario de Codepen fue un paso más allá y le añadió un poco de 3D para convertir las fichas en las caras de un cubo: 3D Dice in CSS3 & Flexbox for pip Normalizing Cross-browser Flexbox Bugs
- Del mismo autor de
Solved by Flexbox
, es esta recopilación de bugs y sus soluciones que te puedes encontrar al trabajar con el flexbox. Flexbugs
- El artículo previo pero en un repositorio en github.
Guía del flexbox en MDN
- Artículo en Mozilla Developer Netword. Te enlazo la versión en español.
Flexbox adventures
- Post centrado en la facilidad del flexbox para calcular espacios y su reparto. Por Chris Wright.
Flexbox For Interfaces All The Way: Tracks Case Study
- El título lo dice todo. Artículo de smashingmagazine.com
Flexbox Froggy
- Aprende el Flexbox de la mano, digo ancas, de una simpática rana.
Flexbox Defense
- Otra forma de aprender el flexbox jugando, esta vez en forma de defensa.
Solved by Flexbox
- Clásicas realizaciones de Css resueltas de forma sencilla con el Flexbox. Estructuras como el
Sticky Footer
o elHoly Grail Layout
entre otras. Flexbox Grid Finesse
- Artículo de Heydon Pickering. Explora y comparte el uso del flexbox para construir diseños sin rejillas y dominar la distribución de los ítems y el espacio ocupado en función de su número y posición.
Fexy boxes
- Flexbox playground and code generator.
Flexbox Tester
- Cómo se calculan los espacios (anchuras) y se reparte el sobrante en los ítems del flexbox.
Flexbox Grid
- A grid system based on the flex display property
Pleeease Play. Prefix and convert
- El proceso de desarrollo e implementación del Flexbox dejó mucho cadáver por el camino. Propiedades y valores obsoletos y versiones de navegadores que nunca se actualizaron. Si te preocupa el soporte por antiguallas esta herramienta te da todo eso y más.
The Ultimate Flexbox Cheat Sheet
- Chuletas de códigos listos para usar
Flexporer
- Otro generador
Easy Masonry Layout With Flexbox
- La famosa distribución
Masonry Layout
realizada con el flexbox. Flexbox based responsive equal height blocks
- Elementos de ordenados en filas de alturas iguales en cada fila. Incluye un fallback de js.
Gridlex: Simple. Robust. Responsive. Flexible.
- Otro sistema de rejilla Css en base al flexbox.
A Stylus-based Flexbox Grid System
- Artículo de sitepoint.com sobre cómo construir un grid layout con el flexbox y Stylus.
El Flexbox y los vídeos
- El flexbox también ayuda a manejar el contenido multimedia embutido en las páginas (vídeos o audios).
La magia de 'Margin: auto;' en el flexbox
- Efectos
sorprendentes
de esta declaración en los ítems del flexbox y lo que podemos hacer con ella sin necesidad de marcado html extra. CSS Flexbox Is Entirely Logical (Almost)
- Algunos resultados nada lógicos o intuitivos al usar
align-items: flex-start
junto amargin-left: auto
Ampliado por los lectores
Flexbox in 5 minutes
- Otro generador. Aporte vía twitter por Jorge Aznar (de jorgeatgu.com)
Por cierto, si conoces algún otro puedes dejarlo en un comentario y lo incluiré en la relación (crédito mediante).
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Hola. Gracias por compartir esta lista. Fue una buena decisión suscribirme a su blog.
ResponderEliminarAcabó de conocer este blog y estoy impresionado con la calidad del material expuesto, gracias.
ResponderEliminar