Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Presentación Grid y flexbox

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
Boostrap.pptx
Boostrap.pptx
Wird geladen in …3
×

Hier ansehen

1 von 13 Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie Presentación Grid y flexbox (20)

Weitere von Medio y forma (20)

Anzeige

Aktuellste (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

×