Presentación Grid y flexbox

Grid y FlexboxPor @Koffer

Platica

Iván Mejía Fabela Drupalero Diseñador Web

@koffer koffer@gmail.com www.medioyforma.info

Buenos tiempos

para hacer la internet

¿Cómo se resolvían? ¿Cómo se resuelven?

Layouts

<Table>

<divs> width:50% Float:left

y ahora que tenemos?

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

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

¿Dudas?

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

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

Fin