Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Presentación Grid y flexbox

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

Libros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

    Sé el primero en comentar

    Inicia sesión para ver los comentarios

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

Vistas

Total de vistas

106

En Slideshare

0

De embebidos

0

Número de embebidos

2

Acciones

Descargas

3

Compartidos

0

Comentarios

0

Me gusta

0

×