Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
dariobf.com #WCBCN
TUS THEMES CON
FLEXBOX SON MÁS
RESPONSIVE
DARIOBF
EXPERTO EN WORDPRESS #WCBCN
@DarioBF
dariobf.com #WCBCN
¡Hola! Soy Darío,
diseñadory maquetador front-end.
@DarioBF
dariobf.com
DARIOBF
EXPERTO EN WORDPRESS
#W...
dariobf.com #WCBCN
Diseñador UI/UX
Maquetador Front-End
Desarrolladorweb WordPress
DesarrolladorActualidadBlog
Formadory c...
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ÁNTI...
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
#...
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...
dariobf.com #WCBCN
TIP
- SHORTHAND
dariobf.com #WCBCN
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: no-wrap | wrap | wrap-reverse;
}
#WCBCN
.c...
dariobf.com #WCBCN
4
- ALINEACIÓN
dariobf.com #WCBCN
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start | flex-e...
dariobf.com #WCBCN
1 2 3 4
FLEX-START
#WCBCN
FLEX-END
1 2 3 4
CENTER
1 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...
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...
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...
dariobf.com #WCBCN
¡GRACIAS!
@DarioBF
dariobf.com
¿PREGUNTAS?
#WCBCN
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Optimiza WordPress y a correr - WordCamp Cantabria 2015 - @DarioBF
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Tus themes con flexbox son más responsive - DarioBF

Download to read offline

Introducción a Flexbox - WordCamp Barcelona 2016

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Tus themes con flexbox son más responsive - DarioBF

  1. 1. dariobf.com #WCBCN TUS THEMES CON FLEXBOX SON MÁS RESPONSIVE DARIOBF EXPERTO EN WORDPRESS #WCBCN @DarioBF
  2. 2. dariobf.com #WCBCN ¡Hola! Soy Darío, diseñadory maquetador front-end. @DarioBF dariobf.com DARIOBF EXPERTO EN WORDPRESS #WCBCN
  3. 3. dariobf.com #WCBCN Diseñador UI/UX Maquetador Front-End Desarrolladorweb WordPress DesarrolladorActualidadBlog Formadory consultorweb OrganizadorWordCamp Santander OrganizadorWPCantabria Editor de traducciones es_ES dariobf.com DARIOBF EXPERTO EN WORDPRESS #WCBCN @DarioBF
  4. 4. dariobf.com #WCBCNhttp://giphy.com/gifs/13XW2MJE0XCoM0
  5. 5. dariobf.com #WCBCN CSS ES INCREIBLE
  6. 6. dariobf.com #WCBCN FLEXBOX ES MUCHO MÁS INCREIBLE
  7. 7. dariobf.com #WCBCN INLINE-BLOCK?¿
  8. 8. dariobf.com #WCBCN FLOAT CLEAR ?¿
  9. 9. TABLAS?¿
  10. 10. dariobf.com #WCBCN 1 - ALGUNAS COSAS SOBRE FLEXBOX
  11. 11. dariobf.com #WCBCN DISTRIBUCIÓN ALINEACIÓN ORDEN } ELEMENTOS
  12. 12. dariobf.com #WCBCN FRAMEWORKS
  13. 13. 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
  14. 14. dariobf.com #WCBCN display: box; /* 2009 */ display: flexbox; /* 2011 */ display: flex; /* ahora */ EVOLUCIÓN #WCBCN
  15. 15. dariobf.com #WCBCN
  16. 16. dariobf.com #WCBCN 2 - CONCEPTOS
  17. 17. dariobf.com #WCBCN Contenedor #WCBCN
  18. 18. dariobf.com #WCBCN Items #WCBCN
  19. 19. dariobf.com #WCBCN .contenedor { display: flex; } VISUALIZADO #WCBCN
  20. 20. dariobf.com #WCBCN 3 - DISTRIBUCIÓN
  21. 21. dariobf.com #WCBCN .contenedor { display: flex; flex-direction: row | row-reverse | column | column-reverse; } DIRECCIÓN #WCBCN
  22. 22. dariobf.com #WCBCN 1 2 3 4 ROW ROW -REVERSE 4 3 2 1 #WCBCN
  23. 23. dariobf.com #WCBCN COLUMN COLUMN-REVERSE 4 3 2 1 1 2 3 4 #WCBCN
  24. 24. dariobf.com #WCBCN .contenedor { display: flex; flex-direction: row; flex-wrap: no-wrap | wrap | wrap-reverse; } FLEX-WRAP #WCBCN
  25. 25. dariobf.com #WCBCN TIP - SHORTHAND
  26. 26. 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> }
  27. 27. dariobf.com #WCBCN 4 - ALINEACIÓN
  28. 28. 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
  29. 29. dariobf.com #WCBCN 1 2 3 4 FLEX-START #WCBCN FLEX-END 1 2 3 4 CENTER 1 2 3 4
  30. 30. dariobf.com #WCBCN SPACE-BETWEEN #WCBCN SPACE-AROUND 1 2 3 4 1 2 3 4
  31. 31. 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
  32. 32. dariobf.com #WCBCN FLEX-START #WCBCN FLEX-END CENTER 1 2 3 4 1 2 3 4 1 2 3 4
  33. 33. dariobf.com #WCBCN#WCBCN CENTER 1 2 3 4 1 2 3 4
  34. 34. dariobf.com #WCBCN STRETCH #WCBCN BASELINE 1 2 3 4
  35. 35. 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.
  36. 36. dariobf.com #WCBCN ALINEACIÓN DEL CONTENIDO #WCBCN
  37. 37. dariobf.com #WCBCN 5 - ORDEN
  38. 38. dariobf.com #WCBCN .item-2 { order: -1; } .item-3 { order: 1; } ORDEN #WCBCN
  39. 39. dariobf.com #WCBCN ORDEN #WCBCN 12 3 4
  40. 40. dariobf.com #WCBCN BONUS - PROPIEDADES DEL ITEM
  41. 41. 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>]
  42. 42. dariobf.com #WCBCN ¡GRACIAS! @DarioBF dariobf.com ¿PREGUNTAS? #WCBCN

Introducción a Flexbox - WordCamp Barcelona 2016

Views

Total views

1,196

On Slideshare

0

From embeds

0

Number of embeds

6

Actions

Downloads

12

Shares

0

Comments

0

Likes

0

×