Arrieros somos: una recua de recursos para dominar al Flexbox (IV) 4.12.15

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 el Holy 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 a margin-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