Una idea básica de flexbox es que las dimensiones y posición de los bloques se puedan adaptar fácilmente a las dimensiones de su contenedor.
display: flex; en el contenedor permite comenzar a usarlo. Hay algunos conceptos nuevos que asimilar, como main axe, cross axe, direction, justify-content, align-content, align-items.
Esta guía visual puede ser muy util: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Varias cosas básicas que antes se resolvían de modo poco natural (como margin: 0 auto para centrado horizontal, o los trucos para hacer centrado vertical), se pueden resolver más fácilmente con flexbox.
La tabla de compatibilidad http://caniuse.com/#feat=flexbox asegura que ya podemos usar flexbox para todos los navegadores modernos.
Por la cuestión de la compatibilidad, hasta hace no mucho, se encontraban muchos peros en la documentación y los tutoriales sobre flexbox. En estos días, esos peros están desactualizados.
Puede encontrarse una guía más actualizada sobre el estado actual de flexbug y (técnicas para cuando hay problemas) en https://github.com/philipwalton/flexbugs
Empieza a usar flexbox. Y corre la voz! ^_^
Algunos ejemplos:
display: flex; en el contenedor permite comenzar a usarlo. Hay algunos conceptos nuevos que asimilar, como main axe, cross axe, direction, justify-content, align-content, align-items.
Esta guía visual puede ser muy util: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Varias cosas básicas que antes se resolvían de modo poco natural (como margin: 0 auto para centrado horizontal, o los trucos para hacer centrado vertical), se pueden resolver más fácilmente con flexbox.
La tabla de compatibilidad http://caniuse.com/#feat=flexbox asegura que ya podemos usar flexbox para todos los navegadores modernos.
Por la cuestión de la compatibilidad, hasta hace no mucho, se encontraban muchos peros en la documentación y los tutoriales sobre flexbox. En estos días, esos peros están desactualizados.
Puede encontrarse una guía más actualizada sobre el estado actual de flexbug y (técnicas para cuando hay problemas) en https://github.com/philipwalton/flexbugs
Empieza a usar flexbox. Y corre la voz! ^_^
Algunos ejemplos:
- Centrado de un bloque:
Ver Flexbox centered en CodePen. - Puede haber flexbox dentro de flexbox
Ver Nested center in flexbox en CodePen. - El clásico layout de 3 columnas, con responsive