Vamos a continuar ya con este proyecto finalizarlo en este video.
Lo primero que voy a hacer es aquí.
Si recuerdas colocamos este contenedor servicios la idea es que nada más aplique cuando sea un tamaño
grande en pequeñas.
De esta forma nada más grandes se van a colocar de esta forma y te mostrará cómo puedes utilizar digamos
un grid o crear una especie de GRID en tu proyecto no tanto como un grid de columnas etc. sino que una
vez que aprendes Flex Box La verdad es que utilizaron framework como gustada Foundation pues ya no es
tan necesario y menos cuando comienzas a utilizarse ese Grid salvo que sea por la velocidad de desarrollo
no tanto de carga como aquí contenedor servicios y como dije todo esto va a estar dentro de media Man
With 7 6 8 pixeles y lo cortamos aquí y voy a colocar un display Flex únicamente cuando estemos en un
dispositivo de tamaño mediano a grande para aplicar este display Flex.
Entonces el momento es tan así hacia abajo al guardar se colocan uno frente al otro y puedes decir lo
hace bastante bien está bastante cerca de lo que quiero pero quiero mostrarte algo más si recuerdas
cada uno de estos tiene un servicio mencioné que cuando utilizas Flex Box la mayoría del código lo escribes
en el padre muy poco en el hijo en este caso si va a tener un poco en el hijo aquí con todo servicio
y para ello dice algo llamado Flex Flex es como un Jordanes un atajo es con un margen cero auto en el
que margin ser auto se refiere a Marien arriba derecha izquierda y abajo.
En este caso Flex son tres parámetros el primero es el factor de crecimiento y el otro es lo que se
hace más pequeño y el último es su base el primero y el último son los más comunes por lo normal cuando
yo utilizo Fleck siempre el segundo lo pongo en cero entonces el primero es el factor de crecimiento
hay que poner uno y básicamente es uno lo que hace es inspeccionar.
Es que toma todo el tamaño que tenga el contenedor aquí es contenedor de servicios el que estoy buscando.
Entonces si por ejemplo este mide aquí mide 1045 pixeles lo va a redondear para hacerlo más fácil.
Si midiera 1200 píxeles entonces lo que hace es tomar esos 1200 píxeles y Flex 1 que es el factor de
crecimiento lo divide entre 3 elementos y le das 400 a cada uno por lo tanto toman el mismo espacio
cada uno de ellos pero en algunos casos vas a querer que algunos elementos mida más.
Por ejemplo aquí voy a ponerle doble va por el punto doble y podemos ponerle flexos si quiere decir
que ese factor de crecimiento va a ser el doble que los otros dos.
Qué quiere decir esto es que estos siguen midiendo por ejemplo 1200 pixeles pero como este es uno y
este es 2 si te fijas tenemos 2 esté y este con Flex 1 entonces son dos elementos y tenemos uno que
tiene 2.
Por lo tanto es como si Fleck pensara que ahora son cuatro elementos y realiza la división 1200 entre
4 y dice OK a cada uno le tocan 300 por lo tanto el primer elemento mediría 300 mentiré 300.
Este mediría 300 por dos porque tendría un factor de crecimiento por 2 y este otro mediría 300.
Así es como funciona este Flex su factor de crecimiento.
Si le pusieras aquí tres ahora serían 1200 entre entre 5 y 10 de hecho para mantenerlo real aquí voy
a poner el elemento puede ser que el contenedor de servicios mide 1140 1140 entre 5 porque tenemos este
y este tiene Flex 1 2 tenemos 2 y este tiene 3 5.
Entonces quedaría 228 el primer elemento pues es el que mide 228 pixeles que parece este otro tiene
un display Flex que tiene 3 sería 228 por tres y va a medir 684.
Y puede ser que queparece 684.
No estoy mintiendo y el último vuelvo a medir los 28 eso es lo que se refiere a ese factor de crecimiento
pero normal cuando yo trabajo creando simulando un grid yo lo dejo con cero es decir no hay tanta explicación
para eso pero créeme si se utiliza mucho tener un flex 1 el segundo siempre lo dejo en cero y le das
lo que viene siendo una base una base que de ahí no se pasa queda fijo que va fijo porque estos dos
están en cero.
Por ejemplo una x 200 pixeles guardó cambios cada uno de los chips va a tener 200 pixeles la media de
200 pixeles porque le vimos una base de 200 y no crece ni nada eso se queda fijo ahí.
Ahora podrías utilizar 33.3 por ciento similar a como si fuera un float si lo haces de esta forma mejor
utiliza 1 aquí exactamente lo mismo Protágoras algunas líneas.
Yo recomiendo más este pero me gusta utilizar con base y una función de CSS de las nuevas sea más Calc
mezclarme sin Calc y ponerme un Reem.
Por qué le pongo menos un ram porque si revisas aquí entre estos dos servicios la parte azul está pegada
entre los dos no hay ninguna separación y si hubiera una letra que llegara hasta la orilla quedarían
juntas.
Entonces en este diseño en el diseño final tenemos esta separación eso es lo que hace este Calc le dice
toma 33.3 por ciento que no se cuanto sea pero resta alumbren de eso se encarga esta función de Calc
si guardamos cambios puedes ver aquí y aquí se me puso un poco de Shum puedes ver que tengo los tres
servicios pero este último deja un espacio a la derecha e incluso puedes ver aquí se ve el espacio eso
pasa porque lo que viene siendo el display Flex está como Flex.
Entonces a mí lo que me gusta utilizarlo aquí es con Flex.
Además de ello Estefi contén y Between y eso hace que ahora sí se vea con un poco de separación aquí
a medias entre cada uno de ellos pues el que se vea esa separación no deja como los gamers esa separación
de márgenes que tiene Gustavo y otros frameworks.
Ellos sí dejan aquí en espacio y se ve bastante bien esta es una forma en la que puedes crear grids
mucho muy fácil en Flex box y la verdad es que se ve bastante bastante bien.
Puedes ver que aquí tenemos también de íconos y de hecho esos iconos tienen este círculo que está aquí
los oponerle aquí abajo voy a poner punto y conos y si por ejemplo le hace un UIT-T digamos Wit de 100
pixeles y un Jaitt 100 pixeles y un borde Radius para hacerlo redondo pues prender 50 por ciento aquí
y colocar un Bagram color si no no se va a ver así que para el primario que es el color amarillo si
lo dejas de esta forma queda de esta forma se ve así como al lado izquierdo etc. para centrar estos
iconos podrías poner a quien display reflex también display reflex.
Este es el padre de los iconos por lo tanto display Flex y content Center no va a entrar horizontal
y Line items Center lo vas a entrar vertical.
Quedan muy pequeños los iconos pero puedes hacerlos más grandes
le ponemos un consigáis de digamos tres Rubem y eso va a ser los iconos más grandes y puedes ver que
los iconos quedarme grandes aquí el de Twitter parece que está muy cerca del de Facebook.
Podríamos ponerle algo así como en lugar de Center aquí ponerle Espais y mini yo se lo va a dejar así
como un poco de separación a los lados y a qué medias también y se ven mucho mejor mucho mucho mejor
aquí estos servicios falta centrarlo pues ver que aquí está centrado lo que viene siendo el icono de
intenta centrarlo aquí con a encender no se va a centrar.
O sea lo que viene siendo los iconos no se centra tendrías que ir aquí ponerle un margen cero.
Auto para que se centraran la otra forma se utilizaron así como una solución más tipo Flex que básicamente
su equipo de puntos servicio que vimos anteriormente que tomaba tres líneas.
Display Flex Flex direction cambiarlo Kolo y recuerda ya no centrasen justifica compañías enteras con
Line items se entera.
Esas son las formas que también lo podrías centrar correctamente.
Aquí los iconos sería bueno tener un margen hacia arriba entonces margin top de dos poco desaparación
aquí y este de nuestro servicio que vendría siendo un HD2 van al contenedor de servicios también lo
podremos poner que ponerlo
contenedor servicios un margen top 3 RAM creo que 3 RAM se va a ver mejor más consistente y también
se va a agregar un poco de separación.
Tenemos estos párrafos no habíamos escrito nada sobre los párrafos más que aquí arriba.
De hecho creo que arriba aquí como párrafo para que sean todos los párrafos iguales.
Bonsais 1 punto 6 va a ser un poco más grande 1.8 Reem se ve mejor y un line de 2 tiene un poco de interlineado
aquí creo que se vería mucho mejor.
Las fuentes más pequeñas este se ve más grande se va viendo mucho mejor puedes ver algunos escenarios
más que nada de algunas cosas que puedes utilizar y otras que no como esta que vimos de display Flex
en algunos casos se puede centrar contact center en otros no ya vimos cómo solucionarlo y puedes ver
que va quedando de esta forma lo último que nos falta hacer formulario Irekia formulario voy a copiar
esta chelos y aquí abajo voy a colocar lo que viene siendo el HTML fuera del Main va a ser un section
y ponemos una idea que va a hacer contacto y una clase que también va a ser contacto.
Después pongo el H2 y el texto contacto
y después colocamos un foam.
De momento no va a ser nada solamente el signo de Gatto estamos viendo más días Flex Box y colocón leyen
que va a decir contactã nos llenando todos los campos ponemos además un leyen cualquier cosa está bien
y cada uno de estos campos también van a utilizar Flex box por lo tanto un contenedor Reflex Box que
en este caso va a ser contenedor Campos se va a rodear todos los campos al menos casi todos queramos
hundir para campo porque también vamos a aplicarle Flex Box habrá los elementos del campo laboral y
aquí ponemos este esfuerzo boquitas de momento nombre y aquí voy a colocar un imput Taipe TEDx espacio
Nema ponerlo como nombre y un Pleiss Holder que va a decir nombre nada más el resto y vamos a crear
dos más que son muy parecidos dos copias
no dos.
Este siguiente es el teléfono que utilizará uno de los campos de HTML5 Ted y el siguiente va a ser el
de correo y vamos a utilizar mail en este caso Pleiss.
Va a decir bueno copiar este mismo texto.
Teléfono correo también voy a crear un último campo.
Puedes ver que estos dos últimos correos y mensajes toman todo el espacio disponible vamos a crear una
copia más ahorita lo estaremos corrigiendo viendo cómo se logra eso con los links que componen el mensaje.
Y en lugar de ser este va a ser un Texas area stacks area cerramos el área y ya por fuera de lo que
viene siendo el contenedor de campos
vamos a crear un dip que va a decir enviar y dentro va a tener un input ya sea utilizar a clase de botón
Summit y clases botón y subir el IVA decir enviar guardamos cambios y si es como se ve nuestro nuestro
diseño de momento puedes ver qué quedó por fuera y eso es porque el contenedor estaba en el main a cortar
este contenedor y aquí va a poner un div
class y pegamos el contenedor aquí lo cierro este contenedor debe de rodear todo hasta el bodhi hasta
el cierre del Body
que lo haga parte de Vamos que se ve bien entonces vamos a continuar.
Si recuerdas que anteriormente había puesto este doble en caso de que pienses qué hace esa doble ya
no se ocupa.
Ya vimos que era Flex en ese caso lo va a quitar y vamos a escribir.
Y ahora si el CSS del formulario es la última parte de este introduccion a Flex Box primero que iba
a colocar un foro solamente tenemos uno macro background color Bar y voy a crear un nuevo color que
se va a llamar gris.
Vamos hacia arriba es como poner en gris y el color va a ser signo de gato 7 5 7 5 y 7 5 3 veces 7 5
y puedes ver que es un color gris un poco más oscuro.
Volvemos hacia abajo tenemos el Forum voy a colocar un patín de dos RAAM y un borde Radius para tener
esquinas redondeadas de un Greim podrían ser diez píxeles también y voy a colocar el zoom leyendo y
vamos a centrar el texto no va a utilizar Flex en este caso bonsais 1 punto 8 Reem y el color va a ser
amarillo primario guardamos cambios y vemos que va quedando de esta forma.
Este es un poco más grande y habiendolo bien.
Y por cierto aquí eso falta también un poco de separación y eso pasa porque lo habíamos puesto en servicio
a cortar lo voy a poner aquí
cuando vemos cambios tenga un poco de separación aquí y voy a ser más grande leyendo un poco más grande
tal vez esté bien habiendo esta forma bastante bien y lo último que nos faltaría es un poco de separación
entre lo que viene siendo este texto y primero la parte de arriba pero también la parte de abajo a suponer
margin 3 RAM y 0
un poco de separación aquí aquí entre el contacto.
También aquí todo lo pone un poco de margen en esta parte
de separación en esta parte.
Por cierto puedes ver que ya que estamos finalizando este diseño no tuvimos que limpiarlo solo Hats
por ningún lado eso no se hace y ya cuando tienes Flex no es necesario hacerlo si tienes esa duda no
es necesario hacerlo una vez que utilizas Flex box ni tampoco Grid entonces puedes ver que nuestra fue
nuestro formulario aquí toma todo el espacio que hay acá está más centrado.
Por lo tanto suponerle arroba Vidia Minuit 768 pixeles y de nueva cuenta para copiar este form que iba
a ponerle un max width de 800 píxeles y un margen cero auto eso lo va a centrar mucho mejor.
Puedes ser que se perdió la separación aquí eso es porque tiene este margin 3 entonces ponerle margin
3 RAM agoto también para que tenga esa separación aquí se ven bastante bien y el siguiente paso es Arashi
los campos que tenemos más acá abajo contenedor campos de nueva cuenta estos solamente se van a mostrar
responsivo en un dispositivo mediano grandes si está muy chico puedes ver que se colocan uno debajo
del otro.
De nueva cuenta estaremos utilizando media Kairi y luego poner contenedor Campos display Flex y guardamos
cambios pues el que los coloca uno frente al otro en este caso puedes ver que miden Mitad y mitad al
menos los dos primeros.
Entonces podríamos ponerle Estefi content Space Between igual que como hicimos en la parte de aquí arriba
tenemos display Fleksy Tiffany contener between voy a copiar este mismo selector que este va a ir a
campo campo y solamente que en lugar de que sea 33 aquí va a ser 50.
Puedes ver qué esta forma puedes generar un grids bastante fácil.
Ahora esto lo que está pasando aquí es que está tomando 50 50 y con eso ya toma todo el contenido que
hay pero este sigue con 50 y este otro con 50 y si hubiera mas todos se irían hacia la derecha eso se
soluciona con una máxima de ponerse flexible RAPP RAPP y ya se van a colocar hacia abajo.
Entonces como que choca la derecha y se va hacia abajo de la otra forma si no se lo pusiera se iría
hacia la derecha totalmente y se va viendo bastante bien.
Faltan algunos estilos ver que tenemos algunos estilos agregados a los inputs también a los levels.
Entonces si recuerdas cada campo también va a tener su display Flex por eso tiene este DIV que se llama
campo para darle algunos estilos y sobretodo formato de Flex a los levels esa alineación que tienen
los levels aquí es porque le di una base para el campo display reflex.
Y aquí voy a colocar campo laboral y lo vamos a poner Flex cero cero y una base de 90 píxeles y eso
va a darle a los levels una base y va a ser que Salines de esta forma y se va bastante bastante bien.
El siguiente paso es que voy a colocar aquí campo y luego imput puedes ver que tengo distintos tipos
de inputs unos textos otros Teléfono 3 y mail y este es un Texas area.
Este otro impulso es un tipo submit pero ese no está dentro del campo.
Puede ser que tenemos esto de campo y este está en enviar.
Ponemos aquí mi input va a seleccionar los tres tipos de inputs y abrimos llaves y voy a colocar Flex
1 si recuerdas Flex 1 mencionábamos que iba a ser el factor de crecimiento debido a que el level ya
tiene una base agregada de 90 input va a decir que yo tomo el resto del contenido que hay y puedes ver
que toma todo el contenido que hay el restante tenemos que hacer lo mismo con lo que viene siendo nuestro
Tex area solamente que aquí lo voy a aplicar también un ID de 30 3 FRAVM 30 píxeles.
Tal vez más tal vez 4 esté bien vamos a aplicarlo un poco de altura a los inputs nos hace falta el Texas
area por lo tanto voy a copiar este punto campo Tex Area y va a tener también en este caso una altura
un Jaitt de 6 cm mas grande que los otros y también un flex 1 Flex 1 en este caso que este Flex 1 hace
que crezca dentro de su contenedor nada más.
Ahora puedes ver que aquí como que no hay mucha separación entre hacia abajo quedan muy juntos Arquivo
ponerle un margen Boron de 2 cm un poco de separación hacia abajo incluso en responsivo va a verse correctamente
y puedes ver que lo que ven siendo los Lavos no están bien centrados podría centrarlo aquí poner algo
así como Alginet items Center y centrar los verticalmente va a depender de cómo quieras realizar tu
diseño en realidad incluso equipa hacer que pierde un poco porque como éste es más alto que los otros
que no se ve muy bien que esté alineado verticalmente pero de nueva cuenta depende de cómo quieras tu
aplicación.
Otra opción es que le pongas un top espadín top y digamos 0.5 Reem un valor pequeño en realidad solamente
queremos que no quede muy pegado arriba pero va a depender de cómo quieras que se vea tu diseño.
También voy a poner un color para que a los labels color blanco será mucho mejor.
Se ve parecido a este.
Lo único que falta es que el correo y el mensaje tienen que tomar el espacio de dos.
Esa parte la tienes que hacer en el contenedor en el padre hay que poner doble o 100 de 100 por ciento
y en éste y debido a que ya tienen Flex porque contenedor Campos tiene un display Flex podemos aplicar
las propiedades de Flex.
También aquí voy a ponerle aquí with 100 por ciento y voy a ponerlo Flex perdón 0 0 y una base del 100
por ciento y eso va a ser que tome el 100 por ciento del espacio que haya y que se ve de esta forma
y se ve correctamente incluso en el móvil se ve bastante bien.
Lo único que nos falta es este botón que está aquí primero puedes ver que no tiene como esa mano cuando
haces Jabber un botón me hace falta habilitarlo o copiar y pegar aquí.
Botón 2 puntos Jover y le ponemos un cursor Painter el cursor puede entrar va a permitirme que aparezca
esta mano.
Ahora si recuerdas te tienen en Andic con una clase de enviar.
Abajo vamos a poner enviar y lo va a poner un display Flex en lugar de utilizar un float a la derecha
reseñamos un display Flex ya tú decides donde quieres que se vea.
Eso es lo más pequeño.
La última parte del la introducción a Flex Estefi content Center lo vas a centrar.
Quieres que esté al centro.
Lo central de esta forma los más pequeños también si lo quieres a la derecha Flex en esta forma o si
lo quieres el inicio Flex start a poner el inicio que es igual a no tener nada en mi caso va a ser Flex
para que esté del lado derecho y puedes ver que tiene un borde ese borde pasa porque debido a que es
un input los inputs tienen un borde.
Vamos a nuestra clase de botón y le ponemos Border nonna no tenga ningún Border y vemos que se ve bastante
bien todo el proyecto así y tiene muchas ventajas en realidad utilizar Flex Box.
Si quieres aprender más a detalle Flex Box tenga un curso 100 por ciento de Flex Box de más de 12 horas
puedes tomar aquí mismo en Demy preguntarme por un Copom por el curso para darte un cupón de lo máximo
que me permite otorgarme pero tiene muchas ventajas al utilizar Flex box no tiene aún el soporte del
100 por ciento pero es el nuevo estándar y pronto lo va a tener.
Así que así es como lo puedes crear proyectos con Flex Box.