Vamos a ver cómo colocar los elementos de los campos uno frente al otro como tenemos en esta parte.
Para ello estaríamos utilizando Flex.
No hay nada de malo en utilizar floods Flex es como otra alternativa más nueva pero con menos soporte
en el navegador se siéntete libre de utilizar cualquiera de las dos primero voy a colocar siempre en
Flex Box vas a encontrar o hay algo que se conoce como el contenedor de Flex.
En este caso por eso creamos Campos que tiene todos los distintos elementos ya que una vez que apliques
Flex se va a aplicar a los hijos algunas propiedades que los van a acomodar de cierta forma.
Primero este campo lo voy a sacar va a estar por fuera de Campos porque solamente quiero utilizar Flex
Box en cada uno de estos tres campos puedes ver que tengo tres y están uno junto al otro actualmente
están todos uno sobre el otro por default así se van a colocar los chips pero podemos utilizar Flex
Books para ponerlos uno frente al otro.
Entonces tenemos aquí Campos.
Abrimos el punto CSS y poner campos y poner un display de Flex simplemente y al poner display Flex ya
se coloca en uno frente al otro.
Entonces quedan de esta forma que de esta forma y algo que tiene Flex es que te evitas limpiar los floods.
Entonces solamente con poner esto ya quedan de esta forma.
Ahora estos elementos puedes ver que quedaron de esta forma queda con un poco de espacio acá hay distintas
formas de utilizar Flex Books para ordenarlos tal vez estés tentado a ponerles como un Wieder y darle
cierto ancho no se utiliza de Xuven Flex Books.
Hay distintas formas como dije puedes utilizar este fait Content y si le pones Center los elementos
quedan centrados aquí.
En lugar de utilizar margin Zero Hatton Flags Books utilizas justificante.
Cuando utilizas display flejes de esta forma ahora hay otras formas por ejemplo Espais Arrowsmith.
Eso los va a colocar como divididos entre el espacio que haya dejando un espacio aquí por ejemplo a
las orillas y los distribuye de esta forma en algunos casos eso quieres otras.
Este espacio virtual donde se coloca un elemento a la izquierda otro al centro de la derecha en caso
de que sean tres si fueran nada más dos que voy a abrir blindex si quitara esto y fuera nada más dos
colocaría uno a la izquierda y la derecha.
Eso es lo que hace space between y por ejemplo si quisieras a recargar si quisieras tener todos al lado
derecho en lugar de utilizar float right utilizarías Flex ente que se te va a permitir alinearlos a
la derecha lo hace muy sencillo Flex Box.
Como dije anteriormente el soporte no es al 100 por ciento como los floods pero es el futuro sin duda
por eso esta actualización de estos videos en parte para ir migrando ya Flex Grid como mencioné anteriormente
puedes ver que si coloco Espais birwin queda como un espacio grande los elementos y en lugar de ponerle
un ancho con width se utiliza la propiedad que se conoce como Flex entonces que iba a colocar campo
que ya vendrían siendo los hijos de Del contenedor campo entonces en lugar de utilizar Weeds se utiliza
Flex Flex y toma tres parámetros el primero es que tanto o más mejor dicho si quieres que el elemento
crezca tome todo el espacio no todo el espacio pero si tienes por ejemplo un contenedor que mide 600
pixeles y tienes dos elementos si los pones Flex 1 a los 2 toman 300 y 300 si le pones a uno uno y el
otro 2 toman 200 y el otro 400 porque los distribuye ya se Flex una operación para no confundirte más
solamente desde cero aquí otro cero porque se restringe y le colocas lo que es una base para esto tenemos
teorizando de nueva cuenta una de las funciones nuevas de ese CS3 que me gusta mucho que es Calc y en
ella voy a colocar 33.3 por ciento si lo dejara de esta forma tendría una base de 33.3 los elementos
que dieran como muy pegados una vez que los imput sean más grandes pero yo lo que quiero aquí es ponerle
menos un ram y esto va a ser como un padre por así decirlo va a agregarle un poco de separación entre
cada uno de los elementos y va a quedar este espacio de esta forma.
Si en el proyecto final se lo quito aquí en campo le deshabilita o lo que es este un Reem quiero eliminar
puedes ver cómo quedan pegados.
Eso es lo que hace un Reem este que está aquí agrega un poco de separación entre uno y otro es como
un parking y es bastante útil voy a regresar aquí voy a volver a mi proyecto ahora si lo haces más pequeño
puedes ver que quedan así como amontonados y queda hacia la derecha quedaría muy pequeño si fuera una
base de 33 por ciento aquí porque es muy pequeño el navegador por lo tanto lo que voy a hacer es colocar
todo esto dentro de un media query para que solamente la aplique Flags Books cuando estemos en un tamaño
de 768 píxeles o más.
Guardamos cambios recargamos en esta parte no se va a aplicar pero en esta parte sí se va a aplicar
ya que fluye bastante bien aquí Campos lo voy a colocar un margen top para tener un poco de separación
entre todos los campos son obligatorios y esta parte también podrías ponerla aquí un margen ponerlo
así como Mariem Boron de dos Reem en el PAN y de esa forma.
Este es el que contienen Marie no podrías colocárselo en campos cualquiera de las dos opciones.
También es correcta y por ejemplo desde que tengo campo voy a copiarlo y pegarlo aquí fuera del mío
de acuerdo y porque quiero que aplique a todos los tamaños voy a colocar a un Pallín 2.5 Reem y cero
tener un poco de separación en cada uno de los campos un poco de espacio hacia adentro y también voy
a colocar el selector del fãtbol campo laboral bonsáis de 1.2 Reem hacer esta fuente un poco más grande
de lo que viene siendo los datos que va a colocar ahora también puedes ver que tenemos esta parte de
los inputs podríamos utilizar Flex box para hacer que llenen todo el espacio disponible.
Sería una forma de hacerlo pero ahí nos estaremos metiendo con cambiar lo que se conoce como el axis
o cambiar la línea en la que corre Flex box.
Es más fácil.
Yo siempre soy de las personas que cree que lo que te haga más fácil tu trabajo es lo que debes utilizar.
Entonces tenemos aquí algunos inputs puedes ver que tengo estos inputs.
Este es de tipo texto Este es de tipo teléfono el otro de acá abajo tipo hotel y tengo este input que
también es un input pero este es de tipo submit lo escribió un selector que sea para dos tipo tex y
teléfono va a ser mejor un campo imput y filtradas o seleccionas estos tipos de input con corchetes
Taipe igual a Tex y el mismo código que está aquí solamente que de esa forma excluimos de nuestro selector
el input que es de tipo submit que le podemos poner un Wilt a veces aquí estudio Kochi y le pones de
Willett huidos que la verdad no se que haga Wii2 nunca lo he utilizado.
No sé por qué le dan prioridad a esa selector que va a recargar y puedes ver que se colocan debajo y
toman el 100 por ciento.
Ahora estos inputs por default tienen un border pues el que tiene una pequeña línea aquí se lo vamos
a quitar con Border Border NOM y eso elimina el border se los quita ya quedan más limpios quedan blancos
nuestros imputs que iba a colocar también un palín vamos a poner de Pauling de .5 Reem y guardo cambio
si recargamos el par en cuando esté escribiendo a tener un poco de espadín hacia adentro aquí que no
quede tan pegado el texto lo voy a definir una altura Jaitt digamos cuatro horas y vamos a probar recargamos
queda muy grande esto es más pequeño tal vez tres queda mucho mejor.
Se ve más parecido a este otro sigue siendo lo más parecido a ser más grande de Nueva cuenta y puedes
ver qué queda aquí un espacio entre el beisbol y también para que el margen top Marien top .5 Rémy también
y recargamos se le va a dar un poco de separación aquí y cuando estés escribiendo también puedes hacer
esta letra un poco más grande si le agregas a quien bonsais digamos 1.2 Rubem punto y coma recargamos
y eso lo va a hacer un poco más grande.
Puedes controlar también esa parte depende de ti como quieras que cómo creas que se ve bien se va viendo
bastante parecido a este puedes ver que se ve bien algo que nos falta aquí por ejemplo este tiene esquinas
redondeadas y lo que es este imput primero vamos a ir con el input si vemos el diseño puedes ver que
añadir está hasta el lado derecho más que nada para que cuando el usuario vaya llenando aquí tenga el
tiempo cerca.
Entonces si recuerdas también anteriormente habíamos colocado esta clase que se llama enviar y este
es el contenedor del input este va a actuar como nuestro Flex conteiner sería el punto CCC que equipo
a colocar punto enviar y luego colocar un display de Flex entonces eso ya me va a hacer más fácil alinear
el botón donde yo quiera mucho más sencillo.
Anteriormente utilizábamos float Ride y eso lo hacía más fácil todavía pero Flex también tiene también
es sencillo de hacerlo aquí si quieres centrarlo puedes poner content Center sólo va a centrar o si
lo quieres del lado derecho pones Flex end y eso lo arrojã hasta el lado derecho.
Entonces se va abriendo bastante bien este color es el mismo que está aquí por lo tanto lo que voy a
hacer es copiar este y en lugar de que sea tipo tex va a ser el tipo submit que va a poner un background
color vamos a utilizar los colores que hemos definido va a ser primario y eso le va a cambiar el color
de fondo a lo que es este botón es el que tiene de nueva cuenta un.
Lo vamos a quitar Border no se lo quitamos el texto puedes ver que es color negro y debe ser blanco
en color UIT-T podremos poner como nombre o como hexadecimal cualkier hasta bien.
De esta forma el botón este es más grande puedes verlo o ponerlo como un padre un rema arriba y abajo
y cuatro Rémy izquierda y derecha recargamos va tomando forma puedes ver que también este es mayúscula.
También sobre el text Transform o percas y vemos cambios nuevamente y finalmente me gustaría ser la
fuente un poco más grande y cualquier cosa más grande son 6 1.2 Reem
recargamos y vemos que queda de esta forma cuando le doy Jabber en este.
Me gustaría tener por ejemplo primero la mano que parece aquí y también ser que cambia el color de fondo.
Por lo tanto voy a copiar este selector y va a poner los puntos Jabber
y aquí le voy a colocar cursor va a ser Painter entonces Painters agregar esa mano que cuando dijo ver
aparece esa mano no nos falta el color de fondo que iba a colocar era un color de nueva cuenta a bautizar
mi variable ya habíamos creado uno más primario oscuro.
Entonces podemos utilizar ese valor recargamos que cuando dijo ver aparecer esta forma en el ejemplo
final aparece ese efecto del degradado y esa es una transición que debemos de colocar aquí o la transición
y la transición es solamente el background color background color .5 segundos y hay muchos efectos que
lo puedes poner aquí están algunos y sin out por ejemplo recargamos abrimos proyecto y cuando dijo ver
puede ser que tengo el degradado si este lo colocas acá el efecto no va a ser el mismo se hace lo mismo
pero no se ve se ve como muy alto cuando lo sacas como se ve entonces debe ser en esta parte recargamos
y se va viendo bastante bien.
Ahora si lo abres en un dispositivo pequeño puedes ver que el input queda como muy chico no me gustaría
que tuviera todo el espacio que hay aquí que lo tomara todo.
Si recuerdas enviar tiene display Flex por lo tanto no podemos ponerle un 100 por ciento.
No no es no es lo correcto aunque funciona no es lo correcto.
Aquí tienes que ponerle Flex 1 y te va a dar el mismo resultado Flex 1 va a ser que crees que tome todo
el espacio disponible si es un solo elemento.
Si fueran dos o más realizaría una operación si tienes un contenedor de 1000 píxeles y tienes dos elementos
le daría mitad y mitad.
Si tienes 3 los mil pixeles entre tres y así consecutivamente.
Ahora si lo grande flexos 1 se sigue aplicando cada botón bastante grande.
Puedo deshabilitar esta parte.
Aquí voy a colocar un acuerdo de nueva cuenta voy a copiar.
Mira cuadricula creo anteriormente y lo pego aquí.
Y nada más coloco este es el lector y lo cierro aquí abajo y voy a poner Flex Quito lo que es el Grog
que es el primero.
Tampoco va a tener Frink y su base va a ser auto no le doy ningún tamaño solamente que sea auto para
que tome el espacio que le corresponda basado en lo que es el Padín y la cantidad de texto que tiene
recargamos pues ver que vuelve a su tamaño y si es algo más pequeño toma todo el espacio disponible
porque está aplicándoles Flex 1 en esta parte se va viendo bastante bien nos hace falta lo que es la
esquina redondeada eso lo voy a colocar en la sombra con el lector de Radius 10 pixeles nada más y eso
de aplicar una pequeña sombra en cada uno de estas esquinas sabiendo bastante bien en realidad se ve
más grande porque este tiene zoom porque este es el proyecto que estamos elaborando.
Quiero que se vea mejor en los videos pero puedes ver que se va viendo bastante bien en el siguiente
video vamos a comenzar con la parte de abajo tendremos que crear un contenedor como éste una tabla con
todos estos controles este imputó eso lo veremos a partir del próximo video.