Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Presentación Grid y flexbox

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Prochain SlideShare
Boostrap.pptx
Boostrap.pptx
Chargement dans…3
×

Consultez-les par la suite

1 sur 13 Publicité

Plus De Contenu Connexe

Similaire à Presentación Grid y flexbox (20)

Publicité

Plus récents (20)

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

×