Veamos cómo posicionar este texto que está aquí en la parte inferior.
Puedes ver que tenemos en la parte superior esta barra en la parte inferior está y entonces tenemos
que empujarla hacia abajo.
Si abrimos el código en el índex HTML definimos esta clase que se llama barra.
Esta nos sirve para posicionar los elementos horizontalmente pero únicamente sus hijos es decir lo que
es la imagen con el enlace y la navegación.
Tenemos que crear una nueva clase que nos permita alinear los hijos que en este caso sería la barra
y el H1 es decir uno arriba y uno abajo para ello vamos a crear una segunda clase que voy a nombrar
contenido Gelder vamos cambios de nueva cuenta esto pasa porque Flex Book solamente afecta al primer
nivel de hijos es decir voy a utilizar este selector contenido Gelder y cuando la aplique display Flex
solamente voy a tener acceso a estas dos de aquí estas dos por ejemplo la barra con el enlace y la navegación
no se van a ver afectadas.
Copiamos este selector de aquí color aquí arriba y de hecho sería antes de la barra para mantener el
orden en que se presenta el contenido contenido Gelder y voy a poner X Display Fleck si quiero mostrarte
algo si guardas cambios puedes ver que nuestro diseño todo se pierde.
Lo que habíamos avanzado ya se perdió.
Esto pasa porque cuando tú aplicas display Flex voy a hacerlo más pequeño de nueva cuenta cuando aplicas
display Flex Flex Box tiene direcciones es decir puede ir de izquierda a derecha de derecha a izquierda
de arriba hacia abajo de abajo hacia arriba pero tú tienes que decirle en qué dirección va a ir.
Por ejemplo si abrimos de nueva cuenta el código la propiedad se llama Flex direction y si tú le pones
rock ese es lo mismo que no ponerle nada ese es el default es decir rock corre así de izquierda a derecha
existe uno que se llama rock Inverse roll ravers.
Puedes ver que los coloca al revés de derecha hacia la izquierda.
Pocas veces la verdad me he tenido que he tenido que utilizar este pero bueno sabes que existe.
Si quieres posicionar el contenido de abajo hacia arriba como estaba utilizás con un icono guardas cambio
sí puedes ver que vuelve el contenido es decir ahora la dirección de Flex Books va a ir de arriba hacia
abajo pero muy importante únicamente los que sean los hijos de contenido joder qué y lo volvemos a ver
podremos ver ese contenidos tenemos la barra y tenemos el H1 es decir únicamente la barra y el H1 la
barra que teníamos anteriormente ya con un display Flex Estefi content no se ve afectada Flex solamente
afecta el primer nivel de hijos es decir voy a colapsar aquí si lo aplico flexivos aquí contenido Gelder
solamente se aplicará en este y en este H1 eso es importante comprender en Facebook si no te haces y
como Click aún no te preocupes esa es la idea del curso y todo el diseño que tenemos todo esto será
hecho con Flex Box y veremos su uso un poco más avanzado entonces puedes ver cada aplicar dirección
se coloca de esta forma y si recuerdas anteriormente para delinear el logo con la navegación habíamos
utilizado o había mencionado que yo fait contente permita alinear contenido horizontalmente y ítemes
te permite alinearlo verticalmente.
Pero aquí le estamos cambiando Fleksy dirección a column por lo tanto estos dos valores cambian también
su orden y eso ya lo complica mucho entiendo la verdad.
Cuando aprendí a Flex Box esta parte hizo que me confundiera bastante pero es muy sencillo de implementar
porque de nueva cuenta si yo estoy contén me permitía alinear el contenido horizontalmente.
Pues ahora me va a permitir alinear verticalmente puedo utilizar aquí estoy contento y de nueva cuenta
tenemos Flex restart.
Ahora si guardas cambios esto se va a ver de la misma forma se va a ver de la misma forma porque es
el default pero quiero mostrarte algo inspecciones aquí por ejemplo en el Getter le das aquí era el
más grande te colocas el contenido Jaider puedes ver que el contenido solamente toma una pequeña parte
del Gelder tenemos que hacer que tome todo el espacio disponible y para ello vamos a poner aquí un 100
por ciento para que este código pueda funcionar entonces altura de 100 por ciento es decir hacer un
hijo de lo que viene siendo el Jaider principal el jefe del principal toma a una altura y su hijo llenã
a esa altura no se va a pasar de ahí porque no se puede pasar es decir el hijo no puede empujar al padre
a que crezca más.
Entonces de esa forma lo limitamos pero toma toda la altura y llega a la altura del padre.
Entonces si inspeccionamos aquí puedes ver que ambos miden lo mismo.
Ahora sí podemos utilizar estas propiedades Flakes estar es el Defour por lo tanto se alinea nada hacia
arriba entonces da igual si está o no está es lo mismo pero por ejemplo digamos que te gustaría posicionarlos
abajo.
Pues ahora utilizas la extent y eso nos va a empujar hacia abajo ahora si los quieres a medias Center
y puedes ver que se colocan a medias si los quieres como vimos anteriormente distribuidos se utiliza
Espais y tenemos Espais Arrow.
Puedes ver que los coloca en lugar de la separación que teníamos si recuerdas así como la separación
del lado izquierdo y del lado derecho pero ahora esta de arriba hacia abajo también está Espais y ibili
que es básicamente lo mismo y al que vamos a utilizar ese Espais between s nos va a permitir alinear
uno arriba y uno abajo y la verdad es ver que se ve bastante bien si es confuso la parte de Flex box
pero es el nuevo estándar y creeme lo hacen más sencillo que la opción anterior que había que eran los
floods ya en los floods no se utilizan mucho no se deben de utilizar salvo que el proyecto deba de ser
desarrollado para un sistema muy antiguo es decir por ejemplo Internet Explorer 7 u 8 si se utilizan
los floods de Xbox no es soportado por una pecadores muy anteriores pero las últimas versiones de todos
los navegadores soportan el flex Box.
Finalmente puede ser que este texto aquí no se ve es muy poco fácil y complicado de ver por lo tanto
hay que poner contenidos Gelder H1.
Entonces esto va a seleccionar el contenido Gelder y el H1 que está aquí entonces solamente va a seleccionar
ese porque vamos a tener un Aché uno por página y solamente quiero afectar este primero lo va a cambiar
el color recuerda el profesional que iba a ser blanco o en hexadecimal signo de numeral y por seis.
En total iban a ser un color blanco que se ve bastante bien ahora por ejemplo si ves el diseño final
aquí tenemos más separación puedes utilizar y voy a hacerlo hacia arriba que sea más fácil de ver.
Puedes utilizar Padín Boron Padín Boron y digamos que me gustaría que fueran 20 píxeles 2 RAAM es lo
mismo que 20 píxeles puede ser que no se agrega un poco de separación.
Si recuerdas el Pajines espacio hacia adentro del elemento mientras que el margenes separación del elemento
hacia otro elemento que en este caso no hay ninguno entonces se ve bien.
Ahora si vemos el diseño puedes ver que aquí hay un corte en esta parte podríamos ir aquí a lo que viene
siendo por ejemplo blindex y ponerle un break si recuerdas habíamos visto Breck saltos de línea y quedaría
de esta forma.
Ya hoy en día pues no se utiliza tanto el break pero bueno en algunos casos es la única opción que vas
a tener en este caso no es de esos casos.
Por lo tanto aquí vamos a ponerle Max with y digamos que midan máximo 700 píxeles por lo tanto sería
70 Reem.
Si guardas cambios puedes ver que de esta forma si lo pones un poco más pequeño creo que se vería mejor.
Puedes ver que un máximo de 60 nos permite que no pase de 600 píxeles y corta el elemento y crea una
nueva línea que creo yo que se ve mucho mejor que la otra opción.
Puedes ver que aquí tiene más separación entre cada uno de los textos está más junto.
Eso se conoce como interlineado.
Por lo tanto aquí le podrías poner un link Jaitt.
Esa es la propiedad que te permiten interlineado.
Si le pones uno es un interlineado de un renglón si le pones dos es interlineado dos renglones 3 y va
a ir creciendo también lo puedes poner como .5 Remes es decir de esta forma quedará muy pequeño o 3
Reem aunque usualmente yo siempre le pongo 2 o 1.8 más o menos en ese rango muy amplio.
El interlineado creo que 2 se ve bastante bien para que se posicione aquí.
Ahora si vemos el diseño esta fuente es un poco más grande en realidad entonces no quiero o mejor dicho
quiero aplicarle los tamaños de las fuentes hacia todas las fuentes no nada más el H1 o mejor dicho
no nada más este H1 sino todos los H1B que llegué a tener en mi proyecto.
Por lo tanto en la parte de globales voy a colocar H1 y vamos a colocar los diferentes h HHS que tenemos
en H2 H3 y una CH4.
Siempre recomiendo en todos los proyectos que hagas siempre lo recomiendo a todo el mundo por adelantado
definas un tamaño un sistema de tamaños.
Después te vas a ver en problemas de estar cambiando fuentes de algunos párrafos por ejemplo mide 20
píxeles otros miden 18 define un sistema de esta forma colócalos de esta forma y les dan dos tamaños
por ejemplo Foncea es 3.8 RAM eso sería 38 pixeles que es bastante grande zonza es 3.4 Reem puedes ver
que hay que bajar por .4 extrapolar como 3 Reem y finalmente el H4 Foncea es 2.6 Rubem puedes ver que
define como un sistema y hago que mis distintos encabezados tengan tamaños proporcionales eso va a afectar
todos pues ver que afecta a este también este de aquí este de acá y todos los distintos que se van a
ver afectados pero siguiendo ciertos sistemas yo siempre les llamo de esta forma entonces se ven mucho
mejores y son parte de los globales y lo puedes hacer pero por ejemplo si doy un poco de scroll aquí
por ejemplo digamos que este Gbit me gustaría que fuera más pequeño lo puedes hacer hacerlo más pequeño
y puedes ver que queda de un remake se queda mucho más pequeño y los demás Grylls siguen teniendo un
tamaño pero en este caso todos los que dices voy a dejar del mismo tamaño en algunos casos si los modificaremos
un poco pero no mucho en realidad definimos un sistema de tamaños de esta forma y queda mucho mejor
tu código y de esta forma evitas que te pase a ti lo que me pasaba a mí hace 15 años ya que estaba creando
mis primeros sitios web que muchas veces los encabezados y los párrafos tenían diferentes tamaños y
a muchos clientes no les gustaba como se veía en el siguiente video ya tenemos lista lo que es esta
parte de arriba se va viendo bien está tomando algo de tiempo pero ya está tomando forma creando un
proyecto real entonces continuaremos con esta parte de aquí y veremos cómo hacerla a partir del siguiente
video.