CSS Grid + Flexbox Daniel Eduardo Arrubla Fúnez @Daniel_Arrubla darrubla 

Flexbox  Es un layout de una sola dimension que permite ubicar items en filas o columnas.  Es agnostico a la dirección en comparación a layouts como block que es verticalmente orientado e inline que es orientado horizontalmente. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

Propiedades  Parent • flex-direction • justify-content • align-items • align-content  Child • order • flex-grow • align-self 

flex-direction .container { flex-direction: row | row-reverse | column | column-reverse; } https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

justify-content .container { justify-content: flex-start | flex-end | center | space- between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; } https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

align-items .container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; } https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

align-content .container { align-content: flex-start | flex-end | center | space- between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; } https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

order .item { order: 5; /* default is 0 */ } https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

flex-grow .item { flex-grow: 4; /* default 0 */ } https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

align-self .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

Grid Es un layout bidimensional que permite ubicar items en filas y columnas. Para trabajar con grid debes aplicar reglas css a los elementos padres (quienes se convierten en el contenedor) y los hijos que se convierten en grid items https://css-tricks.com/snippets/css/complete-guide-grid/ 

Propiedades  Parent • grid-template • grid-gap • justify-content • align-items  Child • grid-column • grid-row • grid-area • place-self 

grid-template .container { grid-template: none | / ; } .container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; column-gap: 10px; row-gap: 15px; } https://css-tricks.com/snippets/css/complete-guide-grid/ 

grid-template-areas .container { grid-template-areas: " | . | none | ..." "..."; } https://css-tricks.com/snippets/css/complete-guide-grid/ 

grid-template-areas https://css-tricks.com/snippets/css/complete-guide-grid/ 

justify-content .container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; } https://css-tricks.com/snippets/css/complete-guide-grid/ 

align-items .container { align-items: start | end | center | stretch; } 

grid-column/grid-row .item { grid-column: / | / span ; grid-row: / | / span ; } https://css-tricks.com/snippets/css/complete-guide-grid/ 

grid-area .item { grid-area: | / / / ; } https://css-tricks.com/snippets/css/complete-guide-grid/ 

place-self .item-a { place-self: center; } .item-a { place-self: center stretch; } https://css-tricks.com/snippets/css/complete-guide-grid/ 

grid-area https://css-tricks.com/snippets/css/complete-guide-grid/ 

No content

No content

No content

Redes Sociales  Daniel Eduardo Arrubla Fúnez  @Daniel_Arrubla  darrubla 

¡¡Gracias!!  Ahora, animate a practicar y hacer tu propio Card, déjanos tu diseño en el grupo de slack.  Aprende jugando con:  http://flexboxfroggy.com/#es  https://cssgridgarden.com/#es