Curso de

Flexbox

www.devcode.la

www.devcode.la

www.devcode.la

· Objetivo 1

 

OBJETIVOS

· Objetivo 2

 

· Objetivo 3

 

www.devcode.la

Descripción del proyecto

PROYECTO

www.devcode.la

REQUISITOS

· Requisito 1

· Requisito 2

· Requisito 3

www.devcode.la

CONCLUSIÓN

Escribir la conclusión

www.devcode.la

¿Qué es y cómo funciona Flexbox?

www.devcode.la

Conjunto de propiedades de CSS

www.devcode.la

Nos ayuda a posicionar mejor nuestros elementos HTML

www.devcode.la

Flexible Box

www.devcode.la

Flexbox para interfaces web modernas

www.devcode.la

Flexbox deja atrás los antiguos y problemáticos mecanismos tradicionales de CSS.

www.devcode.la

¿Para q nos sirve Flexbox?

 

Crear diseños flexibles con menos lineas de codigo

 

www.devcode.la

Flexbox necesita de un elemento padre y por lo menos un elemento hijo

 

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

 

Made with Slides.com