Upload
dario-bf
View
110
Download
5
Embed Size (px)
Citation preview
dariobf.com #WCBCN
TUS THEMES CON FLEXBOX SON MÁS
RESPONSIVE
DARIOBFEXPERTO EN WORDPRESS #WCBCN
@DarioBF
dariobf.com #WCBCN
¡Hola! Soy Darío, diseñador y maquetador front-end.
@DarioBF
dariobf.com
DARIOBFEXPERTO EN WORDPRESS
#WCBCN
dariobf.com #WCBCN
Diseñador UI/UX Maquetador Front-End
Desarrollador web WordPress Desarrollador ActualidadBlog
Formador y consultor web Organizador WordCamp Santander
Organizador WPCantabria Editor de traducciones es_ES
dariobf.com
DARIOBFEXPERTO EN WORDPRESS
#WCBCN
@DarioBF
dariobf.com #WCBCNhttp://giphy.com/gifs/13XW2MJE0XCoM0
TABLAS ?¿
dariobf.com #WCBCN
<div class="col-lg-4 col-md-6 col-sm-9 metamos-mas-clases porque-si“> ...contenido
</div>
NO ES SEMÁNTICO
#WCBCN
dariobf.com #WCBCN
display: box; /* 2009 */display: flexbox; /* 2011 */display: flex; /* ahora */
EVOLUCIÓN
#WCBCN
dariobf.com #WCBCN
dariobf.com #WCBCN
.contenedor {display: flex;flex-direction: row | row-reverse | column | column-reverse;
}
DIRECCIÓN
#WCBCN
dariobf.com #WCBCN
.contenedor {display: flex;flex-direction: row;flex-wrap: no-wrap | wrap | wrap-reverse;
}
FLEX-WRAP
#WCBCN
dariobf.com #WCBCN
.contenedor {display: flex;flex-direction: row;flex-wrap: no-wrap | wrap | wrap-reverse;
}
#WCBCN
.contenedor {display: flex;flex-flow: <flex-direction> <flex-wrap>
}
dariobf.com #WCBCN
.contenedor {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start | flex-end | center | space-between | space-around;
}
ALINEACIÓN HORIZONTAL
#WCBCN
Cómo los elementos se distribuyen en el eje y
dariobf.com #WCBCN
.contenedor {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;align-items: flex-start | flex-end | center | baseline | stretch;
}
ALINEACIÓN VERTICAL
#WCBCN
Cómo los elementos se distribuyen en el eje x
dariobf.com #WCBCN
.contenedor {display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
ALINEACIÓN DEL CONTENIDO
#WCBCN
Alineación de las líneas del contenido cuando hay espacio extra en el eje x.
dariobf.com #WCBCN
.item {order: <número>;flex-grow: <número>; /* Por defecto 0 */flex-shrink: <número>; /* Por defecto 1 */flex-basis: <longitud> | auto; /* Por defecto auto */align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
PROPIEDADES ITEMS
#WCBCN
flex: <flex-grow> <flex-shrink> [<flex-basis>]
dariobf.com #WCBCN
¡GRACIAS!
@DarioBF
dariobf.com
¿PREGUNTAS?
#WCBCN