Introducción a Flexbox, ponencia impartida en la WordCamp Bilbao 2017

1. dariobf.com #WCBCN
CREA TUS LAYOUTS CON
FLEXBOX
DARIOBF
EXPERTO EN WORDPRESS #WCBilbao
@DarioBF

2. dariobf.com #WCBCN
¡Hola! Soy Darío,
diseñador y maquetador front-end.
@DarioBF
dariobf.com
DARIOBF
EXPERTO EN WORDPRESS
#WCBilbao

3. 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
DARIOBF
EXPERTO EN WORDPRESS
@DarioBF
#WCBilbao

4. dariobf.com #WCBilbaohttp://giphy.com/gifs/13XW2MJE0XCoM0

5. dariobf.com #WCBilbao
CSS ES
INCREIBLE

6. dariobf.com #WCBilbao
FLEXBOX ES
MUCHO MÁS
INCREIBLE

7. dariobf.com #WCBilbao
INLINE-BLOCK?¿

8. dariobf.com #WCBilbao
FLOAT
CLEAR ?¿

9. TABLAS?¿

10. dariobf.com #WCBilbao
1
- ALGUNAS COSAS
SOBRE FLEXBOX

11. dariobf.com #WCBilbao
DISTRIBUCIÓN
ALINEACIÓN
ORDEN } ELEMENTOS

12. dariobf.com #WCBilbao
FRAMEWORKS

13. dariobf.com #WCBilbao
<div class="col-lg-4 col-md-6 col-sm-9 metamos-mas-clases porque-si“>
...contenido
</div>
NO ES SEMÁNTICO
#WCBilbao

14. dariobf.com #WCBilbao
display: box; /* 2009 */
display: flexbox; /* 2011 */
display: flex; /* ahora */
EVOLUCIÓN
#WCBilbao

15. dariobf.com #WCBilbao

16. dariobf.com #WCBilbao
2
- CONCEPTOS

17. dariobf.com #WCBilbao
Contenedor
#WCBilbao

18. dariobf.com #WCBilbao
Items
#WCBilbao

19. dariobf.com #WCBilbao
.contenedor {
display: flex;
}
VISUALIZADO
#WCBilbao

20. dariobf.com #WCBilbao
3
- DISTRIBUCIÓN

21. dariobf.com #WCBilbao
.contenedor {
display: flex;
flex-direction: row | row-reverse | column | column-
reverse;
}
DIRECCIÓN
#WCBilbao

22. dariobf.com #WCBilbao
1 2 3 4
ROW
ROW -REVERSE
4 3 2 1
#WCBilbao

23. dariobf.com #WCBilbao
COLUMN COLUMN-REVERSE
4
3
2
1
1
2
3
4
#WCBilbao

24. dariobf.com #WCBilbao
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: no-wrap | wrap | wrap-reverse;
}
FLEX-WRAP
#WCBilbao

25. dariobf.com #WCBilbao
TIP
- SHORTHAND

26. dariobf.com #WCBilbao
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: no-wrap | wrap | wrap-reverse;
}
.contenedor {
display: flex;
flex-flow: <flex-direction> <flex-wrap>
}
#WCBilbao

27. dariobf.com #WCBilbao
4
- ALINEACIÓN

28. dariobf.com #WCBilbao
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start | flex-end | center | space-
between | space-around;
}
ALINEACIÓN HORIZONTAL
Cómo los elementos se distribuyen en el eje y
#WCBilbao

29. dariobf.com #WCBilbao
1 2 3 4
FLEX-START
FLEX-END
1 2 3 4
CENTER
1 2 3 4
#WCBilbao

30. dariobf.com #WCBilbao
SPACE-BETWEEN
SPACE-AROUND
1 2 3 4
1 2 3 4
#WCBilbao

31. dariobf.com #WCBilbao
.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
Cómo los elementos se distribuyen en el eje x
#WCBilbao

32. dariobf.com #WCBilbao
FLEX-START
FLEX-END
CENTER
1 2 3 4
1 2 3 4
1 2 3 4
#WCBilbao

33. dariobf.com #WCBilbao
CENTER
1 2 3 4
1 2 3 4
#WCBilbao

34. dariobf.com #WCBilbao
STRETCH
BASELINE
1 2 3 4
#WCBilbao

35. dariobf.com #WCBilbao
.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
Alineación de las líneas del contenido cuando hay
espacio extra en el eje x.
#WCBilbao

36. dariobf.com #WCBilbao
ALINEACIÓN DEL CONTENIDO
Referencia
#WCBilbao

37. dariobf.com #WCBilbao
5
- ORDEN

38. dariobf.com #WCBilbao
.item-2 {
order: -1;
}
.item-3 {
order: 1;
}
ORDEN
#WCBilbao

39. dariobf.com #WCBilbao
ORDEN
12 3 4
#WCBilbao

40. dariobf.com #WCBilbao
BONUS
- PROPIEDADES DEL ITEM

41. dariobf.com #WCBilbao
.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
flex: <flex-grow> <flex-shrink> [<flex-basis>]
#WCBilbao

42. dariobf.com #WCBilbaohttps://giphy.com/gifs/night-neon-rain-l0CRCmMBYQbL7dCmI

43. dariobf.com #WCBilbao
CSS GRID
A Complete Guide to Grid

44. dariobf.com #WCBCN
¡GRACIAS!
@DarioBF
¿PREGUNTAS?
#WCBilbaodariobf.com