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

Presentación Grid y flexbox

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Boostrap.pptx
Boostrap.pptx
Cargando en…3
×

Eche un vistazo a continuación

1 de 13 Anuncio

Presentación Grid y flexbox

Descargar para leer sin conexión

Una presentación para Xalapa Code sobre estas dos nuevas opciones para acomodar con css.

Una presentación para Xalapa Code sobre estas dos nuevas opciones para acomodar con css.

Anuncio
Anuncio

Más Contenido Relacionado

Anuncio
Anuncio

Presentación Grid y flexbox

  1. 1. Grid y Flexbox Por @Koffer Platica
  2. 2. Iván Mejía Fabela Drupalero Diseñador Web @koffer koffer@gmail.com www.medioyforma.info
  3. 3. Buenos tiempos para hacer la internet
  4. 4. ¿Cómo se resolvían? ¿Cómo se resuelven? Layouts
  5. 5. <Table>
  6. 6. <divs> width:50% Float:left
  7. 7. y ahora que tenemos?
  8. 8. La especificación describe un modelo de caja de CSS optimizado para el diseño de interfaz de usuario. En el modelo de flex layout, los elementos secundarios de un contenedor flexible se pueden colocar en cualquier dirección y pueden "flexionar" sus tamaños, ya sea para rellenar el espacio no utilizado o contraerse para evitar desbordar al elemento principal. Tanto la alineación horizontal como la vertical de los elementos secundarios (children) se pueden manipular fácilmente. La anidación de estos recuadros (horizontal dentro de vertical, o vertical dentro de horizontal) se puede usar para crear diseños en dos dimensiones. Flexbox
  9. 9. Este módulo CSS define un sistema bidimensional basado en una cuadrícula, optimizado para el diseño de interfaz de usuario. En el modelo cuadrícula, los elementos secundarios (children) de un contenedor de cuadrícula se pueden colocar en ranuras (slots) arbitrariamente en una cuadrícula de diseño flexible o de tamaño fijo. Grid Layout
  10. 10. ¿Dudas?
  11. 11. Ligas Flexbox • https://www.w3.org/TR/css-flexbox-1/ • https://css-tricks.com/snippets/css/a-guide-to- flexbox/ • http://flexboxfroggy.com/ • https://caniuse.com/#feat=flexbox
  12. 12. Ligas Grid • https://www.w3.org/TR/css-grid-1/ • https://css-tricks.com/snippets/css/complete- guide-grid/ • http://cssgridgarden.com • https://caniuse.com/#search=grid%20layout
  13. 13. Fin

×