1 00:00:00,450 --> 00:00:06,750 Vamos a ver cómo colocar los elementos de los campos uno frente al otro como tenemos en esta parte. 2 00:00:06,840 --> 00:00:09,270 Para ello estaríamos utilizando Flex. 3 00:00:09,270 --> 00:00:15,690 No hay nada de malo en utilizar floods Flex es como otra alternativa más nueva pero con menos soporte 4 00:00:16,280 --> 00:00:23,690 en el navegador se siéntete libre de utilizar cualquiera de las dos primero voy a colocar siempre en 5 00:00:23,690 --> 00:00:28,250 Flex Box vas a encontrar o hay algo que se conoce como el contenedor de Flex. 6 00:00:28,250 --> 00:00:34,530 En este caso por eso creamos Campos que tiene todos los distintos elementos ya que una vez que apliques 7 00:00:34,530 --> 00:00:39,630 Flex se va a aplicar a los hijos algunas propiedades que los van a acomodar de cierta forma. 8 00:00:39,630 --> 00:00:45,060 Primero este campo lo voy a sacar va a estar por fuera de Campos porque solamente quiero utilizar Flex 9 00:00:45,060 --> 00:00:50,040 Box en cada uno de estos tres campos puedes ver que tengo tres y están uno junto al otro actualmente 10 00:00:50,040 --> 00:00:55,170 están todos uno sobre el otro por default así se van a colocar los chips pero podemos utilizar Flex 11 00:00:55,170 --> 00:00:57,230 Books para ponerlos uno frente al otro. 12 00:00:57,550 --> 00:00:59,510 Entonces tenemos aquí Campos. 13 00:00:59,710 --> 00:01:08,580 Abrimos el punto CSS y poner campos y poner un display de Flex simplemente y al poner display Flex ya 14 00:01:08,580 --> 00:01:10,440 se coloca en uno frente al otro. 15 00:01:10,490 --> 00:01:16,820 Entonces quedan de esta forma que de esta forma y algo que tiene Flex es que te evitas limpiar los floods. 16 00:01:16,830 --> 00:01:20,660 Entonces solamente con poner esto ya quedan de esta forma. 17 00:01:20,820 --> 00:01:26,550 Ahora estos elementos puedes ver que quedaron de esta forma queda con un poco de espacio acá hay distintas 18 00:01:26,550 --> 00:01:34,440 formas de utilizar Flex Books para ordenarlos tal vez estés tentado a ponerles como un Wieder y darle 19 00:01:34,440 --> 00:01:37,840 cierto ancho no se utiliza de Xuven Flex Books. 20 00:01:38,010 --> 00:01:44,430 Hay distintas formas como dije puedes utilizar este fait Content y si le pones Center los elementos 21 00:01:44,430 --> 00:01:45,850 quedan centrados aquí. 22 00:01:46,110 --> 00:01:50,280 En lugar de utilizar margin Zero Hatton Flags Books utilizas justificante. 23 00:01:50,670 --> 00:01:56,640 Cuando utilizas display flejes de esta forma ahora hay otras formas por ejemplo Espais Arrowsmith. 24 00:01:56,890 --> 00:02:03,100 Eso los va a colocar como divididos entre el espacio que haya dejando un espacio aquí por ejemplo a 25 00:02:03,110 --> 00:02:08,130 las orillas y los distribuye de esta forma en algunos casos eso quieres otras. 26 00:02:08,190 --> 00:02:13,050 Este espacio virtual donde se coloca un elemento a la izquierda otro al centro de la derecha en caso 27 00:02:13,050 --> 00:02:20,010 de que sean tres si fueran nada más dos que voy a abrir blindex si quitara esto y fuera nada más dos 28 00:02:20,070 --> 00:02:23,320 colocaría uno a la izquierda y la derecha. 29 00:02:23,340 --> 00:02:31,270 Eso es lo que hace space between y por ejemplo si quisieras a recargar si quisieras tener todos al lado 30 00:02:31,270 --> 00:02:40,060 derecho en lugar de utilizar float right utilizarías Flex ente que se te va a permitir alinearlos a 31 00:02:40,060 --> 00:02:42,000 la derecha lo hace muy sencillo Flex Box. 32 00:02:42,010 --> 00:02:48,190 Como dije anteriormente el soporte no es al 100 por ciento como los floods pero es el futuro sin duda 33 00:02:48,730 --> 00:02:56,040 por eso esta actualización de estos videos en parte para ir migrando ya Flex Grid como mencioné anteriormente 34 00:02:56,040 --> 00:03:03,000 puedes ver que si coloco Espais birwin queda como un espacio grande los elementos y en lugar de ponerle 35 00:03:03,000 --> 00:03:09,330 un ancho con width se utiliza la propiedad que se conoce como Flex entonces que iba a colocar campo 36 00:03:10,380 --> 00:03:16,190 que ya vendrían siendo los hijos de Del contenedor campo entonces en lugar de utilizar Weeds se utiliza 37 00:03:16,190 --> 00:03:23,690 Flex Flex y toma tres parámetros el primero es que tanto o más mejor dicho si quieres que el elemento 38 00:03:24,110 --> 00:03:30,440 crezca tome todo el espacio no todo el espacio pero si tienes por ejemplo un contenedor que mide 600 39 00:03:30,440 --> 00:03:37,400 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 40 00:03:37,400 --> 00:03:44,830 otro 2 toman 200 y el otro 400 porque los distribuye ya se Flex una operación para no confundirte más 41 00:03:44,850 --> 00:03:52,010 solamente desde cero aquí otro cero porque se restringe y le colocas lo que es una base para esto tenemos 42 00:03:52,010 --> 00:03:59,810 teorizando de nueva cuenta una de las funciones nuevas de ese CS3 que me gusta mucho que es Calc y en 43 00:03:59,810 --> 00:04:07,250 ella voy a colocar 33.3 por ciento si lo dejara de esta forma tendría una base de 33.3 los elementos 44 00:04:07,250 --> 00:04:13,480 que dieran como muy pegados una vez que los imput sean más grandes pero yo lo que quiero aquí es ponerle 45 00:04:13,480 --> 00:04:19,420 menos un ram y esto va a ser como un padre por así decirlo va a agregarle un poco de separación entre 46 00:04:19,420 --> 00:04:22,870 cada uno de los elementos y va a quedar este espacio de esta forma. 47 00:04:23,170 --> 00:04:31,600 Si en el proyecto final se lo quito aquí en campo le deshabilita o lo que es este un Reem quiero eliminar 48 00:04:33,490 --> 00:04:35,340 puedes ver cómo quedan pegados. 49 00:04:35,360 --> 00:04:40,840 Eso es lo que hace un Reem este que está aquí agrega un poco de separación entre uno y otro es como 50 00:04:40,840 --> 00:04:47,080 un parking y es bastante útil voy a regresar aquí voy a volver a mi proyecto ahora si lo haces más pequeño 51 00:04:47,080 --> 00:04:52,000 puedes ver que quedan así como amontonados y queda hacia la derecha quedaría muy pequeño si fuera una 52 00:04:52,000 --> 00:04:58,750 base de 33 por ciento aquí porque es muy pequeño el navegador por lo tanto lo que voy a hacer es colocar 53 00:04:58,750 --> 00:05:05,780 todo esto dentro de un media query para que solamente la aplique Flags Books cuando estemos en un tamaño 54 00:05:05,780 --> 00:05:09,170 de 768 píxeles o más. 55 00:05:09,280 --> 00:05:15,260 Guardamos cambios recargamos en esta parte no se va a aplicar pero en esta parte sí se va a aplicar 56 00:05:17,940 --> 00:05:24,560 ya que fluye bastante bien aquí Campos lo voy a colocar un margen top para tener un poco de separación 57 00:05:24,560 --> 00:05:30,290 entre todos los campos son obligatorios y esta parte también podrías ponerla aquí un margen ponerlo 58 00:05:30,290 --> 00:05:37,080 así como Mariem Boron de dos Reem en el PAN y de esa forma. 59 00:05:37,080 --> 00:05:40,920 Este es el que contienen Marie no podrías colocárselo en campos cualquiera de las dos opciones. 60 00:05:40,930 --> 00:05:47,100 También es correcta y por ejemplo desde que tengo campo voy a copiarlo y pegarlo aquí fuera del mío 61 00:05:47,110 --> 00:05:53,870 de acuerdo y porque quiero que aplique a todos los tamaños voy a colocar a un Pallín 2.5 Reem y cero 62 00:05:54,400 --> 00:06:01,260 tener un poco de separación en cada uno de los campos un poco de espacio hacia adentro y también voy 63 00:06:01,260 --> 00:06:11,490 a colocar el selector del fãtbol campo laboral bonsáis de 1.2 Reem hacer esta fuente un poco más grande 64 00:06:12,200 --> 00:06:18,400 de lo que viene siendo los datos que va a colocar ahora también puedes ver que tenemos esta parte de 65 00:06:18,400 --> 00:06:24,730 los inputs podríamos utilizar Flex box para hacer que llenen todo el espacio disponible. 66 00:06:24,730 --> 00:06:30,510 Sería una forma de hacerlo pero ahí nos estaremos metiendo con cambiar lo que se conoce como el axis 67 00:06:30,510 --> 00:06:34,390 o cambiar la línea en la que corre Flex box. 68 00:06:34,450 --> 00:06:35,250 Es más fácil. 69 00:06:35,260 --> 00:06:40,750 Yo siempre soy de las personas que cree que lo que te haga más fácil tu trabajo es lo que debes utilizar. 70 00:06:41,340 --> 00:06:45,900 Entonces tenemos aquí algunos inputs puedes ver que tengo estos inputs. 71 00:06:45,900 --> 00:06:53,370 Este es de tipo texto Este es de tipo teléfono el otro de acá abajo tipo hotel y tengo este input que 72 00:06:53,370 --> 00:07:00,330 también es un input pero este es de tipo submit lo escribió un selector que sea para dos tipo tex y 73 00:07:00,330 --> 00:07:12,170 teléfono va a ser mejor un campo imput y filtradas o seleccionas estos tipos de input con corchetes 74 00:07:12,680 --> 00:07:22,950 Taipe igual a Tex y el mismo código que está aquí solamente que de esa forma excluimos de nuestro selector 75 00:07:23,520 --> 00:07:29,940 el input que es de tipo submit que le podemos poner un Wilt a veces aquí estudio Kochi y le pones de 76 00:07:29,940 --> 00:07:34,770 Willett huidos que la verdad no se que haga Wii2 nunca lo he utilizado. 77 00:07:34,770 --> 00:07:41,070 No sé por qué le dan prioridad a esa selector que va a recargar y puedes ver que se colocan debajo y 78 00:07:41,070 --> 00:07:42,760 toman el 100 por ciento. 79 00:07:42,960 --> 00:07:47,970 Ahora estos inputs por default tienen un border pues el que tiene una pequeña línea aquí se lo vamos 80 00:07:47,970 --> 00:07:56,600 a quitar con Border Border NOM y eso elimina el border se los quita ya quedan más limpios quedan blancos 81 00:07:56,600 --> 00:08:05,640 nuestros imputs que iba a colocar también un palín vamos a poner de Pauling de .5 Reem y guardo cambio 82 00:08:05,640 --> 00:08:10,820 si recargamos el par en cuando esté escribiendo a tener un poco de espadín hacia adentro aquí que no 83 00:08:10,820 --> 00:08:18,290 quede tan pegado el texto lo voy a definir una altura Jaitt digamos cuatro horas y vamos a probar recargamos 84 00:08:18,290 --> 00:08:24,170 queda muy grande esto es más pequeño tal vez tres queda mucho mejor. 85 00:08:24,170 --> 00:08:31,190 Se ve más parecido a este otro sigue siendo lo más parecido a ser más grande de Nueva cuenta y puedes 86 00:08:31,290 --> 00:08:41,330 ver qué queda aquí un espacio entre el beisbol y también para que el margen top Marien top .5 Rémy también 87 00:08:42,710 --> 00:08:47,560 y recargamos se le va a dar un poco de separación aquí y cuando estés escribiendo también puedes hacer 88 00:08:47,940 --> 00:08:57,790 esta letra un poco más grande si le agregas a quien bonsais digamos 1.2 Rubem punto y coma recargamos 89 00:08:57,820 --> 00:08:59,170 y eso lo va a hacer un poco más grande. 90 00:08:59,230 --> 00:09:05,540 Puedes controlar también esa parte depende de ti como quieras que cómo creas que se ve bien se va viendo 91 00:09:05,540 --> 00:09:11,510 bastante parecido a este puedes ver que se ve bien algo que nos falta aquí por ejemplo este tiene esquinas 92 00:09:11,510 --> 00:09:18,660 redondeadas y lo que es este imput primero vamos a ir con el input si vemos el diseño puedes ver que 93 00:09:19,070 --> 00:09:23,760 añadir está hasta el lado derecho más que nada para que cuando el usuario vaya llenando aquí tenga el 94 00:09:23,760 --> 00:09:25,460 tiempo cerca. 95 00:09:25,470 --> 00:09:30,720 Entonces si recuerdas también anteriormente habíamos colocado esta clase que se llama enviar y este 96 00:09:30,720 --> 00:09:37,490 es el contenedor del input este va a actuar como nuestro Flex conteiner sería el punto CCC que equipo 97 00:09:37,500 --> 00:09:45,210 a colocar punto enviar y luego colocar un display de Flex entonces eso ya me va a hacer más fácil alinear 98 00:09:45,210 --> 00:09:47,690 el botón donde yo quiera mucho más sencillo. 99 00:09:47,730 --> 00:09:54,090 Anteriormente utilizábamos float Ride y eso lo hacía más fácil todavía pero Flex también tiene también 100 00:09:54,090 --> 00:10:01,290 es sencillo de hacerlo aquí si quieres centrarlo puedes poner content Center sólo va a centrar o si 101 00:10:01,290 --> 00:10:06,640 lo quieres del lado derecho pones Flex end y eso lo arrojã hasta el lado derecho. 102 00:10:07,380 --> 00:10:12,030 Entonces se va abriendo bastante bien este color es el mismo que está aquí por lo tanto lo que voy a 103 00:10:12,030 --> 00:10:21,130 hacer es copiar este y en lugar de que sea tipo tex va a ser el tipo submit que va a poner un background 104 00:10:21,130 --> 00:10:28,210 color vamos a utilizar los colores que hemos definido va a ser primario y eso le va a cambiar el color 105 00:10:28,210 --> 00:10:33,250 de fondo a lo que es este botón es el que tiene de nueva cuenta un. 106 00:10:33,370 --> 00:10:41,650 Lo vamos a quitar Border no se lo quitamos el texto puedes ver que es color negro y debe ser blanco 107 00:10:41,650 --> 00:10:48,140 en color UIT-T podremos poner como nombre o como hexadecimal cualkier hasta bien. 108 00:10:48,390 --> 00:10:56,170 De esta forma el botón este es más grande puedes verlo o ponerlo como un padre un rema arriba y abajo 109 00:10:56,200 --> 00:11:04,010 y cuatro Rémy izquierda y derecha recargamos va tomando forma puedes ver que también este es mayúscula. 110 00:11:04,070 --> 00:11:12,820 También sobre el text Transform o percas y vemos cambios nuevamente y finalmente me gustaría ser la 111 00:11:12,820 --> 00:11:18,080 fuente un poco más grande y cualquier cosa más grande son 6 1.2 Reem 112 00:11:20,920 --> 00:11:25,690 recargamos y vemos que queda de esta forma cuando le doy Jabber en este. 113 00:11:25,750 --> 00:11:31,210 Me gustaría tener por ejemplo primero la mano que parece aquí y también ser que cambia el color de fondo. 114 00:11:31,210 --> 00:11:36,150 Por lo tanto voy a copiar este selector y va a poner los puntos Jabber 115 00:11:38,770 --> 00:11:47,930 y aquí le voy a colocar cursor va a ser Painter entonces Painters agregar esa mano que cuando dijo ver 116 00:11:47,940 --> 00:11:54,180 aparece esa mano no nos falta el color de fondo que iba a colocar era un color de nueva cuenta a bautizar 117 00:11:54,180 --> 00:11:57,320 mi variable ya habíamos creado uno más primario oscuro. 118 00:11:57,600 --> 00:12:04,020 Entonces podemos utilizar ese valor recargamos que cuando dijo ver aparecer esta forma en el ejemplo 119 00:12:04,020 --> 00:12:12,030 final aparece ese efecto del degradado y esa es una transición que debemos de colocar aquí o la transición 120 00:12:12,480 --> 00:12:18,480 y la transición es solamente el background color background color .5 segundos y hay muchos efectos que 121 00:12:18,480 --> 00:12:26,490 lo puedes poner aquí están algunos y sin out por ejemplo recargamos abrimos proyecto y cuando dijo ver 122 00:12:26,490 --> 00:12:34,640 puede ser que tengo el degradado si este lo colocas acá el efecto no va a ser el mismo se hace lo mismo 123 00:12:34,640 --> 00:12:43,810 pero no se ve se ve como muy alto cuando lo sacas como se ve entonces debe ser en esta parte recargamos 124 00:12:44,480 --> 00:12:45,580 y se va viendo bastante bien. 125 00:12:45,580 --> 00:12:51,220 Ahora si lo abres en un dispositivo pequeño puedes ver que el input queda como muy chico no me gustaría 126 00:12:51,220 --> 00:12:54,390 que tuviera todo el espacio que hay aquí que lo tomara todo. 127 00:12:54,520 --> 00:13:00,410 Si recuerdas enviar tiene display Flex por lo tanto no podemos ponerle un 100 por ciento. 128 00:13:00,410 --> 00:13:06,580 No no es no es lo correcto aunque funciona no es lo correcto. 129 00:13:06,580 --> 00:13:14,560 Aquí tienes que ponerle Flex 1 y te va a dar el mismo resultado Flex 1 va a ser que crees que tome todo 130 00:13:14,560 --> 00:13:17,230 el espacio disponible si es un solo elemento. 131 00:13:17,230 --> 00:13:23,740 Si fueran dos o más realizaría una operación si tienes un contenedor de 1000 píxeles y tienes dos elementos 132 00:13:24,030 --> 00:13:25,200 le daría mitad y mitad. 133 00:13:25,240 --> 00:13:29,730 Si tienes 3 los mil pixeles entre tres y así consecutivamente. 134 00:13:29,830 --> 00:13:35,420 Ahora si lo grande flexos 1 se sigue aplicando cada botón bastante grande. 135 00:13:35,580 --> 00:13:37,870 Puedo deshabilitar esta parte. 136 00:13:37,960 --> 00:13:42,760 Aquí voy a colocar un acuerdo de nueva cuenta voy a copiar. 137 00:13:42,810 --> 00:13:46,850 Mira cuadricula creo anteriormente y lo pego aquí. 138 00:13:49,500 --> 00:13:58,700 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 139 00:13:59,140 --> 00:14:00,270 que es el primero. 140 00:14:00,500 --> 00:14:06,200 Tampoco va a tener Frink y su base va a ser auto no le doy ningún tamaño solamente que sea auto para 141 00:14:06,200 --> 00:14:12,290 que tome el espacio que le corresponda basado en lo que es el Padín y la cantidad de texto que tiene 142 00:14:12,990 --> 00:14:18,200 recargamos pues ver que vuelve a su tamaño y si es algo más pequeño toma todo el espacio disponible 143 00:14:18,230 --> 00:14:26,170 porque está aplicándoles Flex 1 en esta parte se va viendo bastante bien nos hace falta lo que es la 144 00:14:26,530 --> 00:14:35,970 esquina redondeada eso lo voy a colocar en la sombra con el lector de Radius 10 pixeles nada más y eso 145 00:14:35,990 --> 00:14:41,950 de aplicar una pequeña sombra en cada uno de estas esquinas sabiendo bastante bien en realidad se ve 146 00:14:41,950 --> 00:14:45,040 más grande porque este tiene zoom porque este es el proyecto que estamos elaborando. 147 00:14:45,040 --> 00:14:50,050 Quiero que se vea mejor en los videos pero puedes ver que se va viendo bastante bien en el siguiente 148 00:14:50,050 --> 00:14:55,720 video vamos a comenzar con la parte de abajo tendremos que crear un contenedor como éste una tabla con 149 00:14:55,720 --> 00:15:00,100 todos estos controles este imputó eso lo veremos a partir del próximo video.