www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
Padre
Hijo
Hijo
Hijo
Hijo
www.devcode.la
Padre
Hijo
Hijo
Hijo
Hijo
Propiedades varian según la interfaz que queramos
www.devcode.la
www.devcode.la
Eje principal
Eje secundario
www.devcode.la
FLEX-DIRECTION
Modificamos el eje principal, es decir la orientación de los elementos hijos
www.devcode.la
JUSTIFY-CONTENT
Alinea los elementos hijos en el eje principal
www.devcode.la
ALIGN-ITEMS
Alinea los elementos hijos en el eje secundario
www.devcode.la
FLEX-WRAP
Nos permite hacer saltos de linea
www.devcode.la
ORDER
Ordenar los elementos hijos
www.devcode.la
ORDER
Se ordenan dependiendo la alineación de nuestros elementos
www.devcode.la
ALIGN-SELF
Alinea nuestros elementos de forma individual
Cumple la misma función de align-items
www.devcode.la
ALIGN-CONTENT
Alinea nuestros elementos hijos si hay mas de una linea que los contenga
www.devcode.la
FLEX-GROW
Definir el tamaño que crecerá un hijo, en relación a sus hermanos, cuando hay espacio disponible en el contenedor (padre)
www.devcode.la
FLEX-SHRINK
Define el tamaño de reducción un hijo, en relación a sus hermanos, cuando falte espacio en el contenedor (padre)
www.devcode.la
FLEX-SHRINK
Valor numérico, por default es 1
www.devcode.la
FLEX-BASIS
Valor en px, %, rem , etc...
www.devcode.la
FLEX
Resume las tres propiedades para modificar el tamaño de nuestros elementos
flex-grow, flex-shrink, flex-basis
www.devcode.la
Los elementos hijos ignoran algunas propiedades de CSS
como: float, vertical-align, clear
www.devcode.la
flex: 1 2 200px
www.devcode.la
FLEX-GROW
Valor de tipo numerico
www.devcode.la
FLEX-GROW
Su valor default es 0 ( su tamaño lo define su contenido)
Entre mayor su valor más parte tomara del espacio disponible del padre
www.devcode.la
IMPORTANTE
Por default el tamaño de los elementos lo define su contenido
www.devcode.la
FLEX-DIRECTION
www.devcode.la
ALIGN-CONTENT
www.devcode.la
FLEX-WRAP
www.devcode.la
ALIGN-ITEMS
www.devcode.la
JUSTIFY-CONTENT
www.devcode.la
ALIGN-SELF