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

dariobf.com #WCBCN

CSS ES INCREIBLE

dariobf.com #WCBCN

FLEXBOX ES

MUCHO MÁS INCREIBLE

dariobf.com #WCBCN

INLINE-BLOCK ?¿

dariobf.com #WCBCN

FLOAT CLEAR ?¿

TABLAS ?¿

dariobf.com #WCBCN

1 - ALGUNAS COSAS

SOBRE FLEXBOX

dariobf.com #WCBCN

DISTRIBUCIÓN ALINEACIÓN

ORDEN } ELEMENTOS

dariobf.com #WCBCN

FRAMEWORKS

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

2 - CONCEPTOS

dariobf.com #WCBCN

Contenedor

#WCBCN

dariobf.com #WCBCN

Items

#WCBCN

dariobf.com #WCBCN

.contenedor {display: flex;

}

VISUALIZADO

#WCBCN

dariobf.com #WCBCN

3 - DISTRIBUCIÓN

dariobf.com #WCBCN

.contenedor {display: flex;flex-direction: row | row-reverse | column | column-reverse;

}

DIRECCIÓN

#WCBCN

dariobf.com #WCBCN

1 2 3 4

ROW

ROW -REVERSE

4 3 2 1

#WCBCN

dariobf.com #WCBCN

COLUMN COLUMN-REVERSE

4

3

2

1

1

2

3

4

#WCBCN

dariobf.com #WCBCN

.contenedor {display: flex;flex-direction: row;flex-wrap: no-wrap | wrap | wrap-reverse;

}

FLEX-WRAP

#WCBCN

dariobf.com #WCBCN

TIP - SHORTHAND

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

4 - ALINEACIÓN

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

1 2 3 4

FLEX-START

#WCBCN

FLEX-END1 2 3 4

CENTER1 2 3 4

dariobf.com #WCBCN

SPACE-BETWEEN

#WCBCN

SPACE-AROUND

1 2 3 4

1 2 3 4

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

FLEX-START

#WCBCN

FLEX-END

CENTER

1 2 3 4

1 2 3 4

1 2 3 4

dariobf.com #WCBCN#WCBCN

CENTER

1 2 3 4

1 2 3 4

dariobf.com #WCBCN

STRETCH

#WCBCN

BASELINE

1 2 3 4

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

ALINEACIÓN DEL CONTENIDO

#WCBCN

dariobf.com #WCBCN

5 - ORDEN

dariobf.com #WCBCN

.item-2 {order: -1;

}

.item-3 {order: 1;

}

ORDEN

#WCBCN

dariobf.com #WCBCN

ORDEN

#WCBCN

12 3 4

dariobf.com #WCBCN

BONUS - PROPIEDADES DEL ITEM

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