Tus themes con flexbox son más responsive - DarioBF
0 recomendaciones1,260 vistas
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.
![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>]](https://image.slidesharecdn.com/tusthemesconflexboxsonmasresponsive-dariobf-161227135045/85/Tus-themes-con-flexbox-son-mas-responsive-DarioBF-41-320.jpg)
Tus themes con flexbox son más responsive - DarioBF
- 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
- 6. dariobf.com #WCBCN FLEXBOX ES MUCHO MÁS INCREIBLE
- 9. TABLAS?¿
- 10. dariobf.com #WCBCN 1 - ALGUNAS COSAS SOBRE FLEXBOX
- 11. dariobf.com #WCBCN DISTRIBUCIÓN ALINEACIÓN ORDEN } ELEMENTOS
- 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
- 19. dariobf.com #WCBCN .contenedor { display: flex; } VISUALIZADO #WCBCN
- 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
- 24. dariobf.com #WCBCN .contenedor { display: flex; flex-direction: row; flex-wrap: no-wrap | wrap | wrap-reverse; } FLEX-WRAP #WCBCN
- 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> }
- 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
- 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
- 38. dariobf.com #WCBCN .item-2 { order: -1; } .item-3 { order: 1; } ORDEN #WCBCN
- 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>]