Índice:

1. Introducción
2. Selectores
3. Formato de Texto
4. El modelo de cajas
5. Layouts
6. Media Querys
7. Animaciones

Trabajo en capas

Posicionamiento
outside

position:

[ static | absolute | relative | fixed | sticky]

Apilamiento

z-index:

Flotar

float:

[ left | right ]

clear:

[ left | right | both ]

Posicionamiento
inside

Position:

[ flex | grid ]

Flex Layout

los elementos hijo se convierten en elementos flexibles.

Contenedor flex

Comportamiento:

flex-flow: ; → flex-direction: ; + flex-wrap: ;

Elemento flex

order: ;

flex-grow: ; | flex-shrink: ; | flex-basis: ;

Flex Layout

Alineación de elemento:

align-self: ; | justify-self: ;

Grid Layout

Divide el contenedor en una grilla

Filas y Columas

Elemento contenedor

La cuadrícula:

grid-auto-columns: ; | grid-auto-rows: ;

<style>.grilla {
		grid-auto-columns: 100px;
		grid-auto-columns: minmax(100px, auto);
		grid-auto-columns: minmax(min-content, 50%);
}</style>

Elemento contenedor

Cuadrícula:

grid-template: ; → grid-template-columns: ; + grid-template-rows: ;

<style>.grilla {
		grid-template-columns: 1fr 40% auto;
		grid-template-rows: repeat(4,1fr);
}
		</style>

Elemento contenedor

Areas:

grid-template-areas:

<style>
	grid-template-areas: "head head head"
	                     "nav  main aside"
	                     "nav  foot foot";
</style>

Elemento Celda

grid-column: ; | grid-row: ; | grid-area: ;

<style>.item {
	grid-column: 1;
	grid-column: 1 / 3;
	grid-column: 1 / span 2;
	grid-column: 1 / -1;
	grid-area: head;
}
</style>

Comportamiento de la grilla

Separacion entre celdas:

grid-gap: ; → grid-row-gap: ; + grid-column-gap: ;