Javascripter, css lover, fake artist
A creative software developer who wants change the world with art and code.
calderonsteven.github.io
github.com/calderonsteven
@pacopistolas
Nace gracias a una iniciativa de mozilla llamada (XUL User Interface Language)
el modelo flexbox se uso en WebOs para diseñar el layout de las aplicaciones nativas (este no fue un caso de éxito)
2009 se crea la especificación del modulo flexbox
2010 implementación parcial por webkit
2010 lo remueven y matan la especificación
2011 sufre una mejoras
2012 ie lo implementa
2012 implementación moderna
Flexbox es un layout-mode, que nos permite determinar la manera como se van a comportar los elementos o flex-items (hijos) que se encuentren dentro de un contenedor o flex-container (padre), de tal manera que se adapten siempre al espacio disponible.
El elemento padre, se define con los valores flex o inline-flex
cada elemento hijo directo de un flex container es un flex item
Dirección eje principal / main axis (horizontal)
de izquierda a derecha
de derecha a izquierda
Dirección eje transversal / cross axis (vertical)
de arriba abajo
de abajo a arriba
Limites
main-start / main-end
cross-start / cross-end
flexbox maneja los tamaños de los flex-items dependiendo de como fueron establecidas las propiedades flex-grow, flex-shrink, y flex-basis en el flex-container (magia negra)
main-size (width)
cross-size (height)
flex-basis: define el tamaño (width) por defecto del item antes de que se distribuya el espacio (ejemplo con justify-content)
flex-shrink: factor de encogimiento, que tanto puede encogerse para dar mas espacio a sus hermanos.
leaverou.github.io/prefixfree/
gruntjs.com
gulpjs.com
flexiejs.com
https://github.com/calderonsteven
@pacopistolas