Este documento presenta los conceptos básicos de Flexbox en CSS, incluyendo la distribución de elementos a través de la dirección y envolturia flex, la alineación horizontal y vertical de elementos, el orden de elementos, y propiedades adicionales para elementos individuales. El autor explica estas características de Flexbox de una manera clara y concisa a través de ejemplos y diagramas.

1. dariobf.com #WCBCN
TUS THEMES CON
FLEXBOX SON MÁS
RESPONSIVE
DARIOBF
EXPERTO EN WORDPRESS #WCBCN
@DarioBF

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

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. dariobf.com #WCBCNhttp://giphy.com/gifs/13XW2MJE0XCoM0

5. dariobf.com #WCBCN
CSS ES
INCREIBLE

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

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

8. dariobf.com #WCBCN
FLOAT
CLEAR ?¿

9. TABLAS?¿

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

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

12. dariobf.com #WCBCN
FRAMEWORKS

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. dariobf.com #WCBCN
display: box; /* 2009 */
display: flexbox; /* 2011 */
display: flex; /* ahora */
EVOLUCIÓN
#WCBCN

15. dariobf.com #WCBCN

16. dariobf.com #WCBCN
2
- CONCEPTOS

17. dariobf.com #WCBCN
Contenedor
#WCBCN

18. dariobf.com #WCBCN
Items
#WCBCN

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

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

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

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

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

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

25. dariobf.com #WCBCN
TIP
- SHORTHAND

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. dariobf.com #WCBCN
4
- ALINEACIÓN

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. dariobf.com #WCBCN
1 2 3 4
FLEX-START
#WCBCN
FLEX-END
1 2 3 4
CENTER
1 2 3 4

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

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. dariobf.com #WCBCN
FLEX-START
#WCBCN
FLEX-END
CENTER
1 2 3 4
1 2 3 4
1 2 3 4

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

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

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. dariobf.com #WCBCN
ALINEACIÓN DEL CONTENIDO
#WCBCN

37. dariobf.com #WCBCN
5
- ORDEN

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

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

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

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. dariobf.com #WCBCN
¡GRACIAS!
@DarioBF
dariobf.com
¿PREGUNTAS?
#WCBCN