Keep calm and write CSS with Flexbox - Luz Maria Maida Claure (WTM - GDG - CBBA)

KEEP CALM

AND

WRITE CSSWITH

FLEXBOX

Luz Maria Maida / @LuMaidaclFront-end engineer / Moka Mint

FLEXBOXFlexbox, es un layout que proporciona una forma más eficiente de distribuir el espacio entre los elementos de un contenedor. Permite alinear, cambiar el tamaño, la dirección e incluso el orden de los elementos en CSS.

* Parental Control *

UN POCO DE HISTORIA

● Cambios constantes.● Especificaciones anteriores

a implementar.● Múltiples versiones de la

especificación implementada.

● No mas cambios.● Especificaciones modernas

hacen una implementación más fácil.

● Herramienta layout extremadamente PODEROSA

%em/remvw/vh

Las unidades relativas de medida son el mejor INDICIO en un contexto ideal, pero siguen

siendo un indicio

Flexbox nos proporciona un diseño sin UNIDADES

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

DEMO

Como desarrollador, usa los recursos SABIAMENTE

CODE OR LIFE?

FLEXBOXW3C: https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/

MDN:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

BROWSERS:http://caniuse.com/#feat=flexbox