Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

¿Qué es Flexbox y Como se Utiliza?

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Presentación Grid y flexbox
Presentación Grid y flexbox
Cargando en…3
×

Eche un vistazo a continuación

1 de 13 Anuncio
Anuncio

Más Contenido Relacionado

Más de Tony López Pagán (14)

Más reciente (20)

Anuncio

¿Qué es Flexbox y Como se Utiliza?

  1. 1. ¿Qué es y Cómo se Utiliza? Por Tony López
  2. 2. ¿Qué es Flexbox? Un modo de estructura en CSS3 que provee una forma sencilla y limpia de organizar los elementos en un contenedor. ● NO USA FLOATS ● Es adaptable y “mobile-friendly” ● Posicionar los elementos-hijos es más sencillo ● Los márgenes del contenedor de Flex no colapsan con los márgenes de su contenido ● El orden de los elementos puede ser cambiado de manera sencilla sin cambiar el código de HTML.
  3. 3. Flexbox Concepto del Modelo de Caja ● La habilidad de alterar el alto y ancho de los elementos para encajar mejor en el espacio disponible del contenedor ● Flexbox es agnóstico en dirección. Trabaja bien horizontal y verticalmente. ● Construido para estructuras de escalas-pequeñas. Mientras que “Grid” que está surgiendo ahora, es para estructuras de escalas-grandes.
  4. 4. Diagrama de Flexbox
  5. 5. Propiedades de Flexbox display: flex | inline-flex flex-grow: <number> flex-direction: row | column flex-shrink: <number> flex-wrap: wrap | nowrap | wrapreverse flex: <integer> flex-basis: <lenght> order: <integer> justify-content: flex-start | flex-end | center align-self: flex-start | flex-end | center align-items: flex-start | flex-end | center align-content: flex-start | flex-end | center
  6. 6. Flexbox en Acción
  7. 7. Flexbox en Acción
  8. 8. Flexbox en Acción
  9. 9. Flexbox en Acción
  10. 10. Flexbox en Acción
  11. 11. Flexbox en Acción
  12. 12. Más Recursos ● https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ● http://learnlayout.com/flexbox.html ● https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties ● https://www.w3schools.com/css/css3_flexbox.asp ● http://flexboxgrid.com/
  13. 13. Mi Página Web ● lopezpagan.com ● youtube.com/lopezpagan ● twitter.com/lopezpagan ● facebook.com/lopezpagan ● github.com/lopezpagan ● plus.google.com/+TonyLopezPagan

×