Post on 09-Aug-2020
FLEXBOX Y GRID Los mejores amigos del maquetadorMauricio Gelves - @maugelves
Mauricio Gelves @maugelves
Licenciado en Informática Desarrollador WordPress Freelance Brand Ambassador en
Web: maugelves.com YouTube: mauriciogelves Instagram: @maugelves Twitter: @maugelves
¿Qué veremos de Flexbox y Grid?
¿Cómo hemos llegado hasta aquí?
Tropiezos de la era pre-flex-grid
Introducción a Flex y Grid
Demos
¿Cómo hemos llegado aquí?
Tim Berners-Lee 06 de Agosto 1991
¿Cómo hemos llegado aquí?
Tropiezos de la era pre-flex-grid
Tabletitis!
Tropiezos de la era pre-flex-grid
Tabletitis!
! Flashitis
Tropiezos de la era pre-flex-grid
" Dividitis
Tabletitis!
! Flashitis
<body> <div class="header"> <div class="logo"></div> <div class="navigation"></div> </div>
<div class="content"> <div class="title"></div> <div class="accordion"></div> </div>
<div class="footer"></div> </body>
Tropiezos de la era pre-flex-grid
# Float-leftitis
" Dividitis
Tabletitis!
! Flashitis
<div style="clear:both;"></div>
<h1>Título de sección</h1>
<p>Lorem Ipsum…</p>
<img src="…">img{ float: left; }
Tropiezos de la era pre-flex-grid
$ Bootstraptitis
# Float-leftitis
" Dividitis
Tabletitis!
! Flashitis
Introducción a Flex y Grid
Flex
Grid
Piet Mondrian - Flex y Grid
Piet MondrianCSS Grid / Flex
Diseño VictorianoFlashitis, Dividitis, Tabletitis, Bootstraptitis
¿Qué es Flex?
Introducción a Flex y Grid
div.container{ border: 5px dashed #000000; display: flex; }
div.box { border: 3px solid #000000; height: 100px; width: 100px; }
.container{ display: flex; flex-wrap: wrap; }
.container{ display: flex; justify-content: flex-start; }
.container{ display: flex; justify-content: flex-end; }
.container{ display: flex; justify-content: space-between; }
Espacio calculado automáticamente por el browser
.container{ display: flex; justify-content: space-around; }
El primer y último espacio es la mitad de ancho del resto de los espacio
.container{ display: flex; justify-content: space-evenly; }
El primero, último y espacios interiores se distribuyen en forma equitativa
.container{ align-items: flex-start; display: flex; height: 200px; }
.container{ align-items: flex-end; display: flex; height: 200px; }
.container{ align-items: center; display: flex; height: 200px; }
.container{ align-items: center; display: flex; height: 400px; justify-content: center; }
.container{ align-items: stretch; display: flex; height: 200px; justify-content: space-evenly; }
.box { height: auto; /* Important */ }
.container{ align-items: center; display: flex; height: 200px; justify-content: space-evenly; }
.box:nth-child(3){ align-self: flex-start; }
.container{ display: flex; flex-direction: row-reverse; }
.container{ display: flex; flex-direction: column; }
.container{ display: flex; flex-direction: column-reverse; }
Introducción a Flex y Grid
¿Qué es Grid?
Columnas Columnas Columnas Columnas Columnas
Filas
Filas
Filas
Filas
gap gap gap gap gap
gap gap gap gap gap
gap gap gap gap gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
¿Puedo usar Grid ya?
.container { display: grid; }
.container{ grid-template-columns: 100px 2fr 1fr; grid-template-rows: 25% 100px 2fr; height: 300px; }
100px 2fr 1fr
25%
100px
2fr
.container{ grid-template-columns: 100px repeat(3, 1fr); grid-template-rows: 25% repeat(4, 1fr); }
1fr 1fr 1fr100px
25%
1fr
1fr
1fr
1fr
.container{ grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(3, 100px); grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; } header
main empty sidebar
footer
.item-a { grid-area: header; }
.item-b { grid-area: sidebar; }
.container{ grid-column-gap: 10px; grid-row-gap: 15px; }
10px 10px 10px
15px
15px
15px
1 2 3 4 5
2
3
4
5
.item { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
.item { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; }
1 2 3 4 5
2
3
4
5
.item { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; }
1 2 3 4 5
2
3
4
5
.item { grid-column-start: span 3; grid-row-start: span 1; }
1 2 3 4 5
2
3
4
5
1 2 3 4 5
2
3
4
5
.item-01{ grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
.item-02 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: 4; z-index: 10; }
.container{ grid-auto-flow: dense; }
.item{ grid-column-start: span 3; grid-row-start: span 1; }
.item.small { grid-column-start: span 1; grid-row-start: span 1; }
.container { grid-template-columns: 1fr; }
@media ( min-width: 400px ) { .container { grid-template-columns: 1fr 1fr; } }
@media ( min-width: 600px ) { .container { grid-template-columns: repeat( 3, 1fr ); } }
@media ( min-width: 800px ) { .container { grid-template-columns: repeat( 4, 1fr ); } }
@media ( min-width: 1024px ) { .container { grid-template-columns: repeat( 5, 1fr ); } }
@media ( min-width: 1280px ) { .container { grid-template-columns: repeat( 6, 1fr ); } }
.container { display: grid; grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) ); }
Flex y Grid
100% de LIBERTAD
Diseños Web
Muchas gracias