CCS (Cascading 

Style Sheets // Hojas de estilo en cascada

Sirve para darle un diseño visual a los elementos (formularios, textos, títulos, botones)
que pusimos en HTML.

Lo más correcto para enlazar archivo CSS a archivo HTML es con:

Con esto pedimos un link relacionado a “hoja de estilo”, de tipeo “texto escrito en css”
que se encuentra en la referencia nombredelarchivo.css (extensión css) guardado en
misma carpeta.

Estructura de CSS
Selector { Propiedad: valor; }
Selector: indican al navegador qué elementos html se seleccionan para aplicarles los
estilos
Propiedad: son atributos para los que se establecen los valores que uno crea
conveniente. Refiere a color, tamaño, dimensiones, posición, etc. cómo se lo quiere
cambiar.
Valor: ej. rojo,
Declaración: es la combinación entre la propiedad y el valor que será asignado al
elemento.
Después de cada declaración (o afirmación) va el punto y coma (;)

Tipos de selectores:
- Universal: *(asterisco). Todo elemento html adquiren las propiedades que se
ingresen aquí.
-
- De tipo: los que seleccionamos por elementos o etiquetas.

- De clases: se crea un atributo a una etiqueta de nombre

class. Toda etiqueta que tenga el atributo class cambiará el estilo. Se debe poner un
punto antes del selector. Se cambian los elementos que tienen la clase indicada.

- ID: debe anteponerse un hastag # al selector. Es un identificador. Identificar un

elemento único, por lo que no se debe dar un mismo ID a más de un elemento

- Por atributo: creamos un atributo dentro de una etiqueta y ese lo ponemos en css
dentro de corchetes []

- Descendiente: podemos crear etiquetas dentro de etiquetas.

para seleccionar solo los <p> que están
dentro de <h2>, primero debemos seleccionar al contenedor, en este caso es <h2> y
luego el elemento que queremos seleccionar <p>.
Si un <p> que no está dentro de un h2, no será seleccionado.
Se lee al reves, los p que están dentro de h2.
Tambien se puede hacer con clases:

Seleccionamos el div que está dentro de otro div.

- Pseudo-clase: son los eventos de la selección. Ej: queremos que cuando pasemos el
cursos sobre una palabra, elemento, cambie de color. Esto sería el evento.
o Hover:

Especificidad:
Resuelve problema de conflictos en estilos. Podemos cambiar una propiedad sin afectar
al resto.
Al ser hoja de estilo en cascada, toma el último que se ingresa.
En el ej, no es que se pusieron 3 colores, sino que se fue
modificando el color del elemento, tomando el último como el
definitivo, el que se mostrará en el navegador.

Estas son las jerarquías

Ya no hay cascada, no se toma el último, se toma el de mayor jerarquía. Por lo que se
mostrará h1 en color red. Toma la clase porque tiene mayor jerarquía.

Si están en el mismo nivel, se toma la cascada, el último.

Estilo en línea: directamente en html como atributo del elemento.

Con el important, seleccionamos un elemento específico al cual darle mayor

especificidad. NO SE USA MUCHO PARA EVITAR CONFLICTOS.

Metodología BEM
Sirve para evitar conflictos de estilos. Nos basamos en el nombre de las clases para
saber qué elementos estamos seleccionando.
La metodología es: Poner el nombre del contenedor mas dos guiones bajos y luego el
nombre del elemento.
El <div> es un contenedor.
Si tenemos varios <input type="text" class="contact-form__input"> y queremos
seleccionar solo el primero: agregamos :first-child a la clase

También se puede poner –-active. Los dos guiones medios indican que es un elemento
distinto a otros.

Cuando hay varios contenedores de form, se van diferenciando con los guiones

Para comentar algo, es decir, no borrarlo pero tampoco que aparezca se agrega /* al
selector que se quiere y se cierra con */
Otra forma es <! -- y cerrando con -->

Medidas
Hay medidas fijas y medidas relativas que dependen de la caja contenedora.
Con las medidas relativas, se puede adaptar el contenido a versiones móviles sin que se
distorcione el elemento. Esto es muy importante para el Responsive design.
1 Em=16px (en la mayoría de los navegadores) – Em es una medida relativa.
1 em es igual al valor que le demos a la caja contenedora. Si a la caja contenedora le
dimos el valor de 25px, el valor de 1em de un elemento inserto en esa caja contenedora
será de 25px.

Con esto, sacamos todo valor predeterminado del

navegador
Viewport: medida que ocupa toda la pantalla. Con F11 se muestra la totalidad o pantalla
completa del viewport. Si el dispositivo tiene
1280x 780= 100 viewport widht será el ancho total y viewport heigth será el alto total.
Esto también es una medida variable.
Width: ancho – 50vw es el 50% del viewport
widht.
Height: alto – 50vh es el 50% del viewport
height.

En cuanto a porcentajes, es medida variable. Es el porcentaje de la caja contenedora.

Propiedades de los textos:

font-size: tamaño de las letras y se pone en
pixeles.
Font-family: tipografia de la letra
Line-height: es el espacio a lo alto que
ocupa una letra, no es el alto de la letra sino
de la caja contenedora de la letra. Nace del
centro de la letra. 1 linea height es ½ del
tamaño de la letra hacia arriba y ½ hacia
abajo
Font-weight: es el ancho o grosor de la letra.

https://fonts.google.com/
Si queremos que toda la pagina tenga determinado estilo de letra, ingresamos dentro de
<head> de html:

con esto hacemos que todo tenga

esta fuente

Normalize:
Elimina todo formato del navegador. Para esto, se ingresa en
https://necolas.github.io/normalize.css/
Se descarga y se guarda como archivo .css (normalize.css) dentro de la carpeta donde
estamos haciendo y lo agregamos dentro del <head>

Tambien podemos agregarlo sin descargarlo, copiando el enlace en href=””

Podemos abrir el archivo normalize.css y cambiar las propiedades del selector img.
Agregando max-width: 100% es para cuando
S se cambie a formato móvil, no se distorcione el
tamaño
Dentro de normalize.css, también modificamos el box-sizing. Esto es para que la caja
contenedora siempre sea del mismo tamaño. Es cero todo, no importa si es px o em
Con esto eliminamos todo margen de la web.
Cualquier texto, objeto que ingresemos
empezará sin ningún borde y sangria, nada. Se
ubicará bien pegado al margen de la pagina.
Está todo reseteado.

Teoría de las cajas

Los elementos en bloques: se ajustan al ancho de su contenedor. Siempre es el total del
ancho de la caja que la contiene.
Los elementos en línea: el ancho depende del contenido de ese elemento, ocupa solo ese
espacio, no todo el ancho de la caja contenedora.
A los elementos en bloque, si se le puede modificar el height y el width pero no a los
elementos en línea.

Para que un elemento en bloque, se comporte como un elemento en línea, está la

propiedad display. Es una propiedad que te permite cambiar el comportamiento de las
cajas.

Propiedades de las cajas

Box-model: formado por content (o el texto), padding, border y margin. Hay que seguir
esta jerarquía para modificar los elementos.

El content lo modificamos con el line-height (modifica el tamaño de la línea)

background-color: cambia el color del fondo.
Padding: es la distancia entre el contenido y el borde de la caja. Es una shorthand, una
propiedad acortada al ser un conjunto de otras propiedades.
Poniendo padding: 20px se le da padding a los 4 lados.

Si ponemos: sería 20px arriba y abajo (eje Y) y 30px izq y

derecha (eje X).
Si ponemos: la primer medida corresponde al
top, luego right, bottom, y left. Si no definimos el ultimo, se toma como el eje x (left =
right).

Text-align: centra el texto en la caja contenedora

Text-shadow: sombrea el texto. eje x, eje
y, cuan difumidado el sombreado y el color. A diferencia del sombreado de la caja, acá
no se pone el borde de rellenado. Para intensificar el efecto se pone coma (,) y se
duplican los valores: 10px 10px 7px green, 10px 10px 7px green:

Margin: distancia entre el borde de las cajas y de los bordes del navegador. Si tenemos
un margin 0 las cajas estarán pegadas. También es un shorthand. Si ponemos un margin
10px de cada lado, debemos tener en cuenta que, si hay dos cajas, en el medio de ambas
habrá 20px, 10 de cada una.
margin: auto centra el elemento al medio del navegador tocando el borde superior
(si es que no lo definimos). Cuando trabajamos con elementos que son bloques y no
están posicionados, de esta manera los centramos

Border: está por fuera del padding. Es una shorthand (Border-width; border-color;
border-style; etc)
Primero ponemos tamaño, style, color
Border-style es el estilo del borde, solid (solido), dashed (línea fragmentada), double
(línea doble), Groove (línea doble con color mas oscuro de una línea en top y left), inset
(línea con color mas oscuro en top-left), outset (línea con color mas oscuro en right-
bottom), entre otros

Border-radius: redondea el borde. redondea toda la caja

Box-shadow: eje x, eje y, cuan

degradado queremos el sombreado, el borde y el color.
Transform
Esto ya es una función. Se utiliza para rotar un elemento luego del valor rotate se
ingresa entre paréntesis los grados que queremos que rote.

Outline: Es un shorhand. Outline-color, style, width. Es como un borde pero sin afectar
a las demás cajas, no ocupa un espacio real en el DOM (DOCUMENT OBJECT
MODEL o modelo de objetos del documento, todos los elementos que están dentro de
nuestra pagina) La propiedad border sí ocupa espacio por lo que si ponemos un tamaño
de caja de 200px y luego un border de 10px, el total del contenido sería 190px mas los
10px del borde. Con el outline, se sigue manteniendo el espacio de 200px. Se ve pero no
se computa.
El borde en un input es un outline

Position
Posicionamos los elementos. Esto significa que afecta el flujo de html, el orden en que
ponemos todos los elementos (uno debajo de otro como se escribe en html). Static: es el
valor por defecto, no está posicionado.
Cuando posicionamos un elemento, hacemos que este adquiera cuatro propiedades
nuevas: top, left, right, bottom. Top y left son las más importantes, si estas están, no
importan los valores de right y bottom (en vano ponerlas si están top y left). Si no
especificamos un top, left, etc… el elemento se posiciona de acuerdo al viewport.
Cuando trabajamos con html, cada caja tiene un espacio reservado.
- Static: El elemento es posicionado de acuerdo al flujo normal del documento.
Las propiedades top, right, bottom, left, and z-index no tienen efecto. Este es el
valor por defecto.
- Relative: hacemos que el espacio original ocupado en el DOM se siga
conservando, aunque movamos la caja para otro lugar, ej, con top: 20px, estos
20px se cuentan desde donde finaliza la caja anterior.// El elemento es
posicionado de acuerdo al flujo normal del documento, y luego es desplazado
con relación a sí mismo, con base en los valores de top, right, bottom, and left.
El desplazamiento no afecta la posición de ningún otro elemento; por lo que, el
espacio que se le da al elemento en el esquema de la página es el mismo como si
la posición fuera static. Elementos posicionados relativamente son desplazados
una cantidad dada de su posición normal en el documento, pero sin que su
desplazamiento afecte a otros elementos.
- Absolute: la caja se ajusta al contenido si no están definidos los valores. Deja de
reservarse el espacio en el DOM. El tamaño del bloque se ajusta al tamaño del
contenido// El elemento es removido del flujo normal del documento, sin crearse
espacio alguno para el elemento en el esquema de la página. Es posicionado
relativo a su ancestro posicionado más cercano, si lo hay; de lo contrario, se
ubica relativo al bloque contenedor (en-US) inicial. Su posición final está
determinada por los valores de top, right, bottom, y left. Este valor crea un
nuevo contexto de apilamiento cuando el valor de z-index no es auto. Elementos
absolutamente posicionados pueden tener margen, y no colapsan con ningún
otro margen.// Los elementos posicionados relativamente se mantienen en el
flujo normal del documento. Por el contrario, un elemento posicionado
absolutamente es removido del flujo de esta manera, los demás elementos se
posicionan como si el mismo no existiera. El elemento posicionado
 absolutamente se posiciona relativamente a su ancestro posicionado más
cercano (es decir, el ancestro más cercano que no es static). Si no hay ningún
ancestro posicionado se ubica relativo al bloque contenedor (en-US) inicial. //
- Fixed: El posicionamiento fijo es similar al posicionamiento absoluto, con la
excepción de que el bloque contenedor del elemento es el viewport. Se mantiene
fijo en el viewport por más que se desplace el contenido. Esto puede usarse para
crear un elemento flotante que se mantiene en la misma posición
independientemente del desplazamiento.
- Sticky: El posicionamiento sticky puede considerarse un híbrido de los
posicionamientos relativo y fijo. Un elemento con posicionamiento sticky es
tratado como un elemento posicionado relativamente hasta que cruza un umbral
especificado, en cuyo punto se trata como fijo hasta que alcanza el límite de su
padre. Por ejemplo: #one { position: sticky; top: 10px; } ..posicionaría el
elemento con id uno relativamente hasta que el viewport sea desplazado de
manera tal que el elemento esté a menos de 10px del límite superior. Más allá de
ese umbral, el elemento sería fijado a 10px del límite superior. Un uso común
para el posicionamiento sticky es para los encabezados en una lista alfabética. El
encabezado "B" aparecerá justo por debajo de los ítems que comienzan con "A"
hasta que se hayan desplazado más allá de la pantalla. En vez de deslizarse fuera
de la pantalla como el resto del contenido, el encabezado "B" se mantendrá
fijado al límite superior del viewport hasta que todos los ítems "B" se hayan
desplazado fuera de la pantalla, en cuyo punto será cubierto por el encabezado
"C", y así sucesivamente. Se debe especificar un umbral con al menos uno de
top, right, bottom, or left para que el posicionamiento sticky se comporte de
forma esperada. Caso contrario, será indistinguible del posicionamiento
relativo.// Nótese que un elemento sticky se "adhiere" a su ancestro más cercano
que tiene un "mecanismo de desplazamiento" (creado cuando el overflow es
hidden, scroll, auto, o bien overlay), aún si ese ancestro no es el ancestro con
desplazamiento más cercano. Esto inhibe efectivamente el comportamiento
"sticky".

eje x 60px, eje Y: con auto centramos el elemento de manera

horizontal en el viewport.
 El contenedor debe estar posicionado para que los elementos
hijos se posicionen dentro del contenedor.

z-index:
Solo en elementos posicionados. Es la forma que ponemos un elemento encima de otro.
Ordena los elementos en el eje Z, más cercano a nosotros. Se recomienda poner z-index
con valor de entre 50 y 50, en caso de necesitar modificar alguno o poner en el medio
otro elemento, hay espacio para agregarlo (ej: poner z-index: 40) // indica el orden de un
elemento posicionado y sus descendientes. Cuando varios elementos se superponen, los
elementos con mayor valor z-index cubren aquellos con menor valor.
Para una caja posicionada (es decir, una con cualquier position aparte de static), la
propiedad z-index especifica:
El nivel de apilamiento en el actual contexto de apilado.
Si la caja establece un contexto de apilamiento local.

Conflicto de hijos y padres: hijo sería el elemento que está dentro de un contenedor.
Para poner por detrás el elemento hijo del elemento padre o contenedor, el hijo debe
tener un z-index: -1 y el contenedor no tiene que estar definido el z-index.

Display:
Modifica el comportamiento de las cajas.
- Block: elementos que ocupan todo el viewport o contenedor, de forma horizontal. Por
lo que cualquier elemento que pongamos luego, se pondrá abajo. Es la propiedad por
defecto

- Inline: elementos en línea, ocupan el espacio que ocupa el contenido. Por lo general,
se usa para textos. No se les puede modificar el tamaño.
- Inline-block: le podemos dar un ancho y un alto. Permite poner un elemento al lado
de otro. El elemento se comporta como bloque pero el tamaño de acuerdo al
contenido.

Ya no se usan más: Table: Son tablas; Inline-table: tablas en línea; List-item: listado de
ítems; Table-cell: el elemento se comporta como una celda de una tabla; Table-row: el
elemento se comporta como una fila de una tabla; Table-column: el elemento se
comporta como una columna de una tabla.

Overflow:
Es un shorthand, abrevia el eje x y el eje y. Refiere a lo que “sobra”, que queda por
fuera de las dimensiones que le pusimos al contenedor.
- Auto: propiedad que detecta que cuando el contenido sobrepasa la caja, da la
posibilidad de scrollear dentro de la caja.

- Scroll: pone la barra de scrollear aunque no haya contenido que sobrepase la

caja.
- Overflow-x: pone la barra para scrollear en el eje x y también en el eje y por
defecto, para evitar que ponga overflow-y si no es necesario, se pone overflow-
y: hidden.
- Hidden: ubica todo el contenido dentro del contenedor sin mostrar la barra
scroll. Si es una imagen, ajusta la imagen al contenedor.

Float (left, right, none, inherit)

Sitúa la imagen dentro del texto. Ya casi ni se usa

Pseudo-elements
Los pseudoelementos que requieran la etiqueta content, no forman parte del DOM, pero
si permiten realizar cambios visuales. Se aplican a los elementos
: : first-line: funciona en elementos en bloque, no funciona en inline. Se utiliza en
texto para modificar la primer línea. Por más que cambie la resolución del viewport,
siempre la primer línea (no importa si se achica el párrafo) tendrá las características que
coloquemos acá. Forman parte del DOM.
: : first-letter: funciona en elementos en bloque, no funciona en inline. Se utiliza en
texto para modificar la primer letra del primer párrafo. Forman parte del DOM.
 : : placeholder: refiere a la indicación que se le da al input para que el usuario
complete. Cuando el usuario completa, desaparece el “inserte…” y se reemplaza por lo
que se completa ya sin el ‘color: red’.
Html:
CSS

: : selection: se comporta como elemento en línea por lo que no le podemos dar

padding, etc. Define la selección del texto que hacemos con el mouse.
: : after y : : before: son hijos de los elementos a los que le aplicamos este
pseudoelemento. No forman parte del DOM. Se comportan como elementos inline. Si o
si necesitan la propiedad Content. Lo escrito en content no se puede seleccionar (por eso
se dice que no está en el DOM). Lo mismo aplica para
HTML:
CSS:

Pseudoclases
“Escucha” (produce un efecto) al elemento.
:hover: cuando el mouse está encima del elemento que seleccionamos, hacemos que
cambie de color, o se agrande…. Cambiamos las propiedades del elemento cuando
pasamos en mouse sobre él. Se usa mucho cuando ponemos un button.
El elemento caja1 pasará a tener otro background-
color, otro tamaño y el efecto de transición se hará
en 1.2seg.
Con Transition también podemos hacer que ese
cambio de efecto se pueda dar en diferentes
tiempos:

:link: si un enlace no está visitado, tiene un color.

:visited: si ese enlace se visitó, tendrá otro color.
:active: cambian las propiedades del elemento cuando hacemos click sobre ese
elemento. El efecto es solamente manteniendo apretado el mouse sobre el elemento.
Con esto se usa mucho la propiedad transition.
:focus: se usa en los elementos input, cambian las propiedades cuando hacemos click
sobre el elemento, cuando dejamos de seleccionar el elemento (hacemos click en otro
elemento) pierde el efecto.

Object-Fit:
Se usa mucho para modificar las propiedades de la imagen (resolución, tamaño, etc). Se
usa para evitar que se distorcione una imagen que ingresamos dentro de un contenedor
(div).
- Fill: ajusta la imagen al contenido perdiendo la resolución si el contenido es
mayor a la imagen. La imagen llena todo el contenido por más que se
distorcione.
- Contain: la imagen se ajusta a su propia resolución dentro del contenedor aunque
este tenga otro tamaño.

- Cover: la imagen se ajusta al contenedor manteniendo su resolución, recorta la

imagen para que se ajuste. El que más se usa para evitar que se distorcione la
imagen si se cambia la resolución de pantalla.

- None: utiliza las propiedades originales de la imagen, no importa si recorta o no.

No sirve para imágenes grandes.
- Scale-down: se queda con la mejor propiedad.

Object-position:
- Left, right, top, button: ajusta la imagen a la izq, derecha, etc del contenedor.
También aca se puede cambiar px, em, %...

-
Cursor: https://www.w3schools.com/cssref/tryit.php?filename=trycss_cursor
Cambia el puntero del mouse cuando éste se sitúa en un determinado elemento.

cuando situamos el cursor sobre la caja, cambia a

pointer (manito)

Cuando presionamos el botón del mouse dentro

del elemento caja, cambia a row-resize

Colores:
Distintas formas de denominar los colores.
- Color name: por nombre mismo del color. Poco usado.
- Hexadecimal: 16 unidades (del 1 al 10, luego de la A a la F) #RRGGBB, donde
RR, GG y BB son números hexadecimales desde 00 hasta FF..

- RGB: mezclando tres colores básicos (rojo, verde y azul)), donde rojo, verde y

azul son números enteros desde 0 a 255 de acuerdo a la intensidad
// El gris se forma con los 3
colores en un mismo valor.
- RGBA: la a refiere a alfa, se usa para la opacidad (opacity) que va de 0 a 1 (0 es
totalmente transparente, 1 es totalmente opaco).
- HSL: el color se define mediante tres valores: *Hue (Matiz) es un entero entre 0
y 360 y recorre todos los colores // * Saturation (Saturación) es un porcentaje
que define la intensidad del color // * Lightness (Luminosidad) es un porcentaje
que indica la claridad u oscuridad del color.
- HSLA
- HWB: (matiz blanco negro), donde matiz es un número entero entre 0 y 360 y
blanco y negro son porcentajes enteros entre 0% y 100%, sin comas entre ellos.
*Hue (Matiz) es un entero entre 0 y 360 y recorre todos los colores // *
Whiteness (Blanco) es un porcentaje que indica la cantidad de blanco que se
añade al color // *Blackness (Negro) es un porcentaje que indica la cantidad de
negro que se añade al color

Teoría:https://www.mclibre.org/consultar/htmlcss/css/css-color.html
Códigos de colores: https://html-color.codes/
Responsive Design – Mobile First
Adaptamos un diseño de web a varias resoluciones. Adaptar un diseño de celular a
Tablet y luego a escritorio. Crearlo para celular y luego adaptar al resto. Google
posiciona mejor en el SEO las paginas así diseñadas.
Detectar resolución y cambiar las etiquetas.
Para evitar que se distorsione el contenido cuando se reduce la resolución de pantalla:

Esto significa que, cuando la pantalla sea menor que 800px, el div se modifique a
display:block y pase a tener un width de 100%.
Necesitamos poner la etiqueta meta viewport en el head de html para que se pueda
identificar la resolución de cada dispositivo donde se abrirá la web.
Una vez tenemos esa etiqueta, podemos trabajar con responsive design.
<meta name="viewport" content="width=device-width, initial-
scale=1.0">

Menu responsivo
Si queremos poner iconos en el menú, debemos poner en el <head>
<script src="https://kit.fontawesome.com/25ba2f27d1.js" crossorigin="anony
mous"></script> para que podamos agregar iconos en la web.

Flex-box
Necesita flex-container (contiene elementos item) y flex-item (elementos dentro de
container)
El contenedor se comporta como un display:block, por lo tanto, vamos a modificar los
elementos dentro de ese “bloque”.
Dirección por defecto cuando trabajamos con flex-box.
Los elementos vienen por defecto en el main axis de izquierda a derecha. Los item están
dentro de un contenedor con display:flex. Si dentro de un div que tiene un display flex,
hay otro div, un p, etc, estos elementos serán flex-items. Son los hijos directos.
Al darle al contenedor, display flex, las cajas se adaptan al contenido manteniendo la
altura de las cajas.
Si queremos cambiar la dirección de las cajas contenidas dentro del container, debemos
cambiar el main axis y por defecto cambia el cross axis. Por lo tanto, debemos cambiar
la dirección del container para que afecten a los ítems.

Propiedades que modifican el contenedor

Propiedades que cambian la dirección del main-axis:
- Flex-direction:
 Flex-direction: row dirección por defecto.// Flex-direction: row-
reverse cambia la dirección del main axis
 Flex-direction: column los ítems pasan a estar en columnas
pasando a estar en el cross axis// Flex-direction: column-reverse
el cross-end pasa a estar arriba.
- Flex-wrap: mantiene el tamaño de las cajas, por lo que si se achica la resolución
de pantalla, las cajas pasan abajo así mantienen tamaño-ancho // Flex-wrap:
wrap mantiene resolución // Flex-wrap: nowrap no mantiene resolución y
desaparecen las cajas al achicar pantalla// Flex-wrap: wrap-reverse al achicarse
pantalla, la ultima caja se mantiene arriba y las demás pasan abajo (6 queda
arriba, si se achica mas, 5 y 6 arriba, luego 4 5 y 6, etc)
- Flex-flow: es un shorthand para flex-direction y flex-wrap Flex-flow: columna
wrap
- Justify-content: center centra el contenido// space-around es como igual al
margin-auto otorgando un mismo margin para ajustar las cajas entre sí y también
con el viewport (excepto primer y ultima caja respecto al viewport)// space-
between extiende el contendido en todo el ancho del viewport poniendo la
mayor distancia que se pueda entre las cajas pero no mantiene el mismo margin
con el viewport //space-evenly similar a space-around pero manteniendo mismo
margin entre la primer y ultima caja y el viewport.

Propiedades que cambian la dirección del cross-axis: el contenedor necesita tener la

propiedad height: 100vh;
- Align-items:
  Align-items: stretch si la caja o item no tiene definido un heigth,
el alto será de todo el cross-axis.
 Align-items: flex-start deja las cajas en la parte superior del
cross-axis. Si la caja o item no tiene definido un heigth, el alto
será de acuerdo al contenido de la caja.
 Align-items: center centra las caja en el medio del viewport (es
decir, de manera vertical)
 Align-items: flex-end sitúa las cajas en la parte inferior del
viewport
- Align-content:
 Align-content: flex-start; sitúa las cajas por debajo cuando se
reduce la resolución. La diferencia con align-items: flex-start es
que en éste ultimo las cajas se desplazan hacia abajo ocupando
todo el cross-axis (manteniendo su tamaño de caja).
 Align-content: baseline funciona con el flex-wrap: wrap-reverse
para que las cajas que están situadas en el cross-end, una vez se
achique la resolución, pasen a situarse arriba.

Propiedades reservadas solo para los

container.

Propiedades que modifican los ítems:

- Dentro de un contenedor, el margin: auto centra el item tanto en el main-axis
como en el cross-axis.
- Flex-grow: 1 los ítems se agrandan a lo ancho para ocupar todo el main-axis
manteniendo el mismo tamaño cada item. Se necesita poner un min-width para
que se respete el mínimo de tamaño cuando se modifique la resolución. El
número 1 refiere al espacio que queda en el main-axis. // si queremos que el
espacio sobrante se lo lleve una sola caja, se selecciona esa caja y dentro de ésta
se coloca flex-grow:1. Si le ponemos esto mismo a otra caja, el espacio sobrante
se reparte, una parte para una caja, otra parte para otra caja.
- Flex-shrink: es para ceder espacio sobrante cuando no alcance el lugar
disponible. Si a una caja se le pone Flex-shrink: 2 va a ceder el doble de espacio
que las otras. Si ponemos 0.5 cede la mitad de espacio que ceden las demás. Si
ponemos 0, no va a ceder nada, se mantendrá fija con el width que le pongamos.
- Flex-basis: es como el width pero más importante, tiene mayor jerarquía que el
width. Es una propiedad específica para las cajas flexibles.
- Flex: es un shorthand, agrupa las 3 anteriores en una sola.

Se empieza a repartir el espacio sobrante cuando todas las cajas alcancen el espacio
asignado.

Order: establece el orden de disposición de un elemento en un contenedor flex o grid.

Los elementos en un contenedor se ordenan por valor de orden ascendente, de acuerdo a
la dirección del main-axis, y luego por su orden de código fuente.

Grid:.
Refiere a grilla. Es un estilo de layout. Es un valor de la propiedad display. La grilla es
estática en sentido que no se modifica la resolución cuando modificamos
Conceptos básicos
- Grid container: la grilla completa, el contenedor
- Grid item: los ítems o elementos que están dentro del container. Son hijos
directos del contenedor.
- Grid cell: elementos dentro de los items
- Grid tracks: son las columnas y row (filas) dentro del container
- Grid área: porción del container que seleccionamos, puede tener varios ítems,
columna y/o row. Tienen que ser consecutivas en vertical y horizontal, no en
diagonal.
- Grid line (column line y row line)

Si hacemos display: grid, solo creamos una sola columna, no creamos una grilla aunque
tengamos 9 items, ya que los ítems son bloques, no inline.

Propiedades que se aplican a grid-container

- Grid-template-rows: crea filas en el container.
3 filas de 150px que estamos
programando. Puede haber más como en el ejemplo de 9 pero las otras 6 estarían
dentro de grid implícito.
- Grid-template-column crea columnas.

- Grid-gap: le da un margin entre cada item (o celdas) pero no entre los bordes del
contenedor. Es un shorthand de: Grid-row-gap y Grid-column-gap.

Unidades:
- Fr: es como flew-grow, se le da a las columnas por lo general a la ultima ya que
es para llenar el espacio restante.
Si en el contenido, hay palabras, el mínimo de tamaño será el de la palabra contenida.

Propiedades que se aplican a grid-item

 - Grid-row. Shorthand de Grid-row-start y Grid-row-end: señala las líneas de las
filas, desde la línea de la fila 1 a la línea de la fila 3.
- Grid-columm: shorthand de Grid-column-start y Grid-column-end:

cuando tenemos varios ítems pero no hemos especificado cada uno con un selector, con
esto seleccionamos el primero de la lista que está dentro del div. Es decir, selecciona el
1.

Seleccionamos el segundo elemento:

Con span lo que hacemos es que empiece en la linea 1 y complete 3 columnas

Repeat: es un parámetro de cantidad y tamaño

En vez de poner ponemos

Grid implícito y explícito:

3 nuevas propiedades de grid implícito: implicito refiere a los items que quedan por
fuera de la asignación de valores. Se crea nueva fila por defecto
- Grid-auto-rows: Igual que el template, modifica la fila creada por defecto
- Grid-auto-columns: igual que el template
- Grid-auto-flow: column, si queremos que en vez de crearse por defecto la fila, se
cree una columna. // Grid-auto-flow: dense, con esto se llena el espacio que se
crean huecos.

Grid dinámico:
Minmax () cual es el mínimo y el máximo que va a medir algo, se separa con coma.

Min-content: el mínimo dependerá del contenido del elemento.

Max-content: el maximo dependerá del contenido del elemento.
Auto-fill: Creación automática de filas que tengan, según ejemplo, un mínimo de 100px
para ocupar todo el width de la resolución.
Auto-fit: rellena el espacio del width

7:01:25

Alineación y control de flujo:

Diferencia con flex:
- La alineación es dentro de cada celda y no alineación total del flex container
- Cada celda sería un “flex container”

(propiedades del grid-container)

Justify-items (horizontalmente) todas las cajas de adentro del container se empiezan a

comportar como un flex-container
Align-items (verticalmente)

Stretch (default) – start – center – end

Place-items: align-items justify-items

Alineación de filas y columnas

-justify-content (horizontalmente)
Align-content (verticalmente)

-stretch (default) – start – center – end

M{as