🔷 Aprende CSS Flexbox en MENOS de 15 MINUTOS — Transcript

Full transcript

1. 0:00en este vídeo vamos a aprender css flex
2. 0:02box en tiempo récord
3. 0:04fred box es una nueva manera de maquetar
4. 0:07en css elementos de forma flexible bien
5. 0:10para ello como veis yo me tengo por aquí
6. 0:12un archivo html en index.html tengo
7. 0:15también una hoja de estilos vinculadas
8. 0:17de este punto css que en la que el cual
9. 0:19todavía no tengo nada y por aquí en este
10. 0:21lado tengo lo que es el navegador para
11. 0:23ir viendo lo que vamos haciendo bien
12. 0:24pues lo primero que necesita para
13. 0:26utilizar flex posts es un flex pop
14. 0:29container vale un flex container
15. 0:31entonces vamos a crear aquí uno este va
16. 0:33a ser mi container vamos a llamarle flex
17. 0:36container por ejemplo se puede llamar
18. 0:38como tú quieras y dentro de este play
19. 0:40container lo que tenemos que tener son
20. 0:42los flex items que son pues los hijos no
21. 0:44que en este caso vamos a tener pues unos
22. 0:46cuantos bien yo me he creado aquí mi
23. 0:48fresh container con cuatro hijos bien
24. 0:50ahora vámonos a los estilos y vamos a
25. 0:52darle un poco de estilo a esto aquí
26. 0:53podéis ver lo que va saliendo ya tenemos
27. 0:54aquí nuestros cuatro números lo primero
28. 0:57que vamos a hacer es a nuestro fresh
29. 0:58container darle lo que es el display
30. 1:00flex vale que es de eso se trata para
31. 1:03utilizar flex tenemos que utilizar el
32. 1:05display flex
33. 1:06veis estoy aquí nos ha cambiado voy a
34. 1:08dar un poco de estilo a todo un poco
35. 1:10para que lo veamos dejo vamos a ponerle
36. 1:11un background color por ejemplo de agua
37. 1:14vamos a darle también un pad y le 10
38. 1:16píxeles el color a cuando me gusta voy a
39. 1:18poner otro y voy a también a ponerle un
40. 1:21poquito de estilo a lo que son los los
41. 1:23items bien ya le añadido aquí unos
42. 1:24cuantos estilos para que podamos ver las
43. 1:26cajas mejor vale le ha añadido al fresh
44. 1:28container pues el background un poco de
45. 1:30padín y un borde para para que lo veamos
46. 1:31ahí bien y lo mismo he hecho con él con
47. 1:34los dips con los hijos con los ítems
48. 1:36después también un background color de
49. 1:38down with después también un margen
50. 1:40entre ellos para que no estén pegados y
51. 1:42le he puesto también pues una line
52. 1:43center para ver el número un poquito más
53. 1:45grande lo que es el tamaño de fuente
54. 1:46para que podamos ver lo que es el número
55. 1:49en grande y también un borde para que
56. 1:51veamos bien el ítem vale los la jaws en
57. 1:53flex box trabajan en una sola dimensión
58. 1:55vale lo que viene a ser en osea en filas
59. 1:58o en columnas ahora mismo vemos que
60. 1:59tenemos una fila esto es porque por
61. 2:01defecto tenemos la propiedad de flex
62. 2:05direction que le tenemos puesto dado a
63. 2:07row vale con la propiedad road
64. 2:09lo que hacemos es ponerlo esto en forma
65. 2:10de fila pero ésta
66. 2:12podemos cambiar la columna y vemos aquí
67. 2:14cara se nos pone en forma de columna
68. 2:16también tenemos la de columna reverse
69. 2:18que esto lo que hace es darle la vuelta
70. 2:20como veis ahora el 4 lo tenemos aquí el
71. 2:223 el 2 y el 1 y también podemos darle lo
72. 2:25que es el roe revés que hace lo mismo el
73. 2:28arroz pero del revés no ahora me la
74. 2:30línea al otro lado y empieza por aquí
75. 2:31pues 1 2 3 y 4 bien voy a quitar esto
76. 2:34del roe direction voy a dejarlo como
77. 2:37estaba para que sea en raw y ahora voy a
78. 2:39añadir unos cuantos ítems más a ver qué
79. 2:41pasa voy a duplicar me esto bien como
80. 2:43estáis viendo ahora ha añadido unos
81. 2:44cuantos item más aquí dentro de añadido
82. 2:47hasta 12 y aquí pues todos se mantienen
83. 2:49en una misma fila pero qué pasa si yo
84. 2:52quiero por ejemplo que no se mantenga en
85. 2:54una misma fila y cuando no quepan en esa
86. 2:55fila salten a una segunda fila pues para
87. 2:58eso tenemos aquí la propiedad de flex
88. 3:00wrap que esto lo que hace es que podemos
89. 3:02ponerle no wrap que es lo que está por
90. 3:04defecto de esa manera es esta de aquí
91. 3:06que nos saltará una fila o podemos
92. 3:08ponerle wrap y esto lo que hará es que
93. 3:10cuando no quepan pues saltarán y se
94. 3:12pondrán en diferentes filas también
95. 3:13tenemos la propiedad wrap
96. 3:16reverse
97. 3:16que lo que hace es pues al revés le
98. 3:19empieza a contar desde abajo y lo que
99. 3:21hace es subir para arriba vale osa lo
100. 3:23mismo que ahora pero de al revés
101. 3:24después también para estas dos
102. 3:25propiedades que hemos visto la de
103. 3:27frescura y la de flexión tenemos una
104. 3:29propiedad que se llama flex flow que lo
105. 3:32que hace es unir estas dos propiedades y
106. 3:33yo podría ponerle aquí por ejemplo row y
107. 3:35decirle wrap de este modo me está me
108. 3:38está utilizando las dos propiedades la
109. 3:39de flex direction y la de frescura en
110. 3:41una sola vale o podría decir por ejemplo
111. 3:43aquí collum y aquí lo estamos viendo me
112. 3:45está haciendo el efecto de columna vale
113. 3:47es una forma pues más corta de escribir
114. 3:49esas dos propiedades que más cosas
115. 3:51tenemos por aquí en flex tenemos también
116. 3:53una manera de alinear los objetos no los
117. 3:56ítems que es el justify content de esta
118. 3:59manera yo le puedo dar por ejemplo
119. 4:00centre ahora tengo un montón de ítems y
120. 4:02por eso no se ve voy a borrar me voy a
121. 4:03quedar también con los que tenía con los
122. 4:05cuatro iniciales vale que lo vamos a ver
123. 4:07mejor y de esta manera estáis viendo voy
124. 4:09a quitar incluso otro más para que
125. 4:11tengamos sólo tres y de esta manera veis
126. 4:13que realmente se alinean a lo que es el
127. 4:15centro con esta propiedad de justified
128. 4:17content centre tenemos varias opciones
129. 4:19aquí podemos decirle flex start y se
130. 4:21alineará lo que es a la izquierda
131. 4:23o podemos decirle también en la línea a
132. 4:25la derecha y después tenemos otras dos
133. 4:28que son space around que esmerar línea
134. 4:30de esta manera y también tenemos lo que
135. 4:32es el space between vale de esta otra
136. 4:35que como veis pues cambiando esto se
137. 4:36ajusta a los laterales y la otra no por
138. 4:38otro lado también imaginaros que esto
139. 4:40tuviera un hey vamos a darle un hate de
140. 4:43unos 400 píxeles y por defecto me hace
141. 4:47esto lo que hace se ajusta a todo pero
142. 4:49tenemos una propiedad para el flex
143. 4:50container que es la de alain items que
144. 4:53podamos darle por ejemplo centre y lo
145. 4:55que hará es se centrará esto
146. 4:56verticalmente pero como podemos ver
147. 4:58tenemos varias opciones por ejemplo el
148. 5:00flex start vale que es una línea lo que
149. 5:03es arriba o el flex en que se alineará
150. 5:05abajo verticalmente tenemos también el
151. 5:08estrés que es el que se me pone por
152. 5:10defecto vale intenta ocupar todo el alto
153. 5:13que tiene y tenemos también el vasselin
154. 5:15que lo que hace es alinearlo a lo que
155. 5:17son en la base de cada uno de los
156. 5:20elementos ahora mismo aquí no se nota
157. 5:21porque todos los elementos tienen el
158. 5:23mismo tamaño vamos a cambiarle por
159. 5:25ejemplo el tamaño de fuente a uno de
160. 5:27ellos al uno le vamos a cambiar aquí
161. 5:28directa
162. 5:29el style el font size veis aquí ya hemos
163. 5:32cambiado el fondo side al 1 y le hemos
164. 5:33puesto 80 y los demás sang se han movido
165. 5:35para bajo porque porque se están
166. 5:37alineando a lo que es la base de este
167. 5:39elemento vale esta base de aquí está si
168. 5:41os fijáis si ponemos una línea recta que
169. 5:43vaya del 1 hasta el 3 la base es la
170. 5:45misma para todos vamos a hacer lo mismo
171. 5:47en los otros dándole otros tamaños
172. 5:49diferentes aquí estáis viendo ahora
173. 5:51aunque se me haya salido un poco el 3 de
174. 5:52la caja pero todos están alineados
175. 5:54perfectamente en su base si nos damos
176. 5:57cuenta su base coincide exactamente en
177. 5:59todos bueno pues esto es otra manera que
178. 6:01tenemos de alinear verticalmente dos
179. 6:03ítems ya quitar ya esto de aquí bien me
180. 6:05he vuelto a añadir aquí más elementos
181. 6:07para el siguiente ejemplo vamos a quitar
182. 6:09este al ain item de antes vamos a poner
183. 6:11el flex wrap a wrap y ahora vamos a ver
184. 6:14que tenemos diferentes maneras de
185. 6:16alinear estas diferentes filas que
186. 6:17tenemos esto se hace con alain content
187. 6:20por ejemplo le podemos hablar aquí space
188. 6:21between y be y veis lo que nos hace ya
189. 6:24no soy ya no ocupa todo ya lo que hace
190. 6:25es que deja espacio entre una fila y
191. 6:27otra vamos a cambiar por ejemplo a space
192. 6:30around y esto lo que va a hacer no se
193. 6:32nota mucho pero ahora sí que hay más
194. 6:33espacio por aquí antes no estaba
195. 6:35pero ahora sí que deja más espacio vamos
196. 6:38a quitarle el 11 y el 12 que creo que se
197. 6:40va a ver mejor con sólo 10 elementos con
198. 6:43dos filas vale aquí tenemos el space
199. 6:45around vamos a ponerlo otra vez el space
200. 6:47between como veis ahora sí que se nota
201. 6:50mejor esto sube para arriba vale y deja
202. 6:52más espacio entre ellos tenemos también
203. 6:54lo que es el stretch aquí de nuevo el
204. 6:56stretch esta manera pues intenta ocupar
205. 6:59todo el alto que puede tenemos también
206. 7:01el center vale que lo que no va a hacer
207. 7:03es centrar todo el contenido todas las
208. 7:05filas que se generen de forma de forma
209. 7:08central no verticalmente y por último
210. 7:10también tenemos el flex estar como
211. 7:12siempre que lo va a hacer es alinearlo
212. 7:14arriba y el end vale que lo que alinea
213. 7:17es abajo todas las filas bien voy a
214. 7:19quitar esto de aquí y ahora vámonos a
215. 7:21las propiedades que tienen los elementos
216. 7:22hijos porque los elementos hijos también
217. 7:24tienen propiedades vámonos al index
218. 7:27e.html vamos a hacerlo aquí vamos a
219. 7:28poner por ejemplo sólo cuatro elementos
220. 7:30para que lo veamos mejor aquí tenemos
221. 7:32estos cuatro elementos voy a darle
222. 7:33colores a cada uno bien aquí tenemos los
223. 7:35cuatro elementos de como veis aquí le ha
224. 7:37dado un color de bagram a cada uno
225. 7:39porque creo que se ve mejor en este
226. 7:40ejemplo
227. 7:41y otra de las propiedades que tenemos
228. 7:42para esto es la propiedad order vale con
229. 7:46el order podemos decirle en qué orden
230. 7:48queremos los elementos yo le puedo dar
231. 7:50aquí orden uno al elemento número uno
232. 7:53vamos a darle order 2 al elemento número
233. 7:552 bien y ya le tengo aquí el orden o al
234. 7:581 el puesto el 1 al 2 el 2 al 3 el 3 y
235. 8:00el 4 al 4 pero qué pasa si cambiamos el
236. 8:02orden si por ejemplo al 2 yo le pongo el
237. 8:054 y al 4 le pongo el 2 pues como veis
238. 8:08aquí se están moviendo los colores ahora
239. 8:10el 1 está aquí el 2 está en la posición
240. 8:12perdón el 4 está en la posición 2 y el 2
241. 8:15está en la posición 4 es una manera que
242. 8:17yo puedo ir cambiando si este por
243. 8:19ejemplo de la posición 1 hasta le doy la
244. 8:20posición 3 podemos ir cambiando
245. 8:23visualmente lo que es el orden de cada
246. 8:25ítem vale esto es una propiedad que se
247. 8:27le aplica directamente a los hijos del
248. 8:29flex container otra propiedad que
249. 8:31tenemos también para los hijos del flex
250. 8:33container es el flex brow como veis le
251. 8:36he dado flex grow de 1 a todos y todos
252. 8:38esos elementos ocupan el mismo sitio
253. 8:40esto es para saber cuánto derecho a
254. 8:42espacio tienen por ejemplo si yo al 4 le
255. 8:45digo que tiene un flex crowe de 2
256. 8:47lo que hará es me ocupará más que el
257. 8:49resto os habéis fijado y si tiene por
258. 8:50ejemplo un frescura de tres pues ocupará
259. 8:53un poquito más todavía vale aquí podemos
260. 8:56exagerar lo y decirle por ejemplo 10 a
261. 8:58ver qué es lo que hace pues seguirá
262. 8:59ocupando más vale es un poco el derecho
263. 9:01que tiene a ocupar espacio para entonces
264. 9:03tú puedes aquí definir pues más o menos
265. 9:05cuánto espacio quieres que ocupe cada
266. 9:07uno veis aquí pues el 2 tiene un 4 de
267. 9:10derecho el 4 tiene un 10 y en fin se van
268. 9:13ajustando en función del valor mientras
269. 9:15más alto pues más espacio tendrá derecho
270. 9:17a ocupar ese es el elemento hijo después
271. 9:21otra propiedad parecida a esta pero al
272. 9:22revés es el flex zinc ésta lo que hace
273. 9:25es todo lo contrario como veis sólo le
274. 9:27ha dado esta la propiedad al primer
275. 9:28elemento y este elemento nos ha hecho
276. 9:30más chico saber si yo voy añadiendo aquí
277. 9:32nuevos elementos voy a copiar me por
278. 9:34ejemplo otros dos elementos más veréis
279. 9:36que el resto de elementos se van
280. 9:37haciendo pequeños porque es el espacio
281. 9:39que les queda pero este elemento no
282. 9:40porque le he dado un zinc de cero esto
283. 9:43quiere decir que menos de eso ya no
284. 9:44puede hacerse más pequeño ya no se
285. 9:46pueden más vale es esta propiedad
286. 9:48para eso sirve para determinar hasta
287. 9:50cuánto se pueden uno de los
288. 9:52elementos también tenemos
289. 9:54flex basics esto lo que hace es darle
290. 9:56una medida de mínima digamos por ejemplo
291. 9:59yo le voy a dar aquí 200 píxeles vales
292. 10:02como el wifi pero en flex y esto no
293. 10:04quiere decir que vaya a medir esto
294. 10:05siempre 200 píxeles pero que como mínimo
295. 10:07pues va a medir esto vale y se va a ir
296. 10:09ajustando en función de eso también le
297. 10:11puedo dar porcentajes o lo que yo quiera
298. 10:13vale que no es sólo cualquier tipo de
299. 10:15medida de longitud sirve en el flex bass
300. 10:17basic y para terminar también deciros
301. 10:20que tenemos la propiedad flex a secas
302. 10:22que también sirve para un poco las
303. 10:25propiedades anteriores para las dos las
304. 10:27tres propiedades anteriores las del
305. 10:29growing
306. 10:30basics vale las podemos poner así
307. 10:33podemos darle al juego justo en este
308. 10:34orden que la he dicho y obtenemos el
309. 10:37mismo resultado es una forma más corta
310. 10:38de poner las tres propiedades anteriores
311. 10:42así que nada con esto espero que te
312. 10:44quede claro o sea hayas aprendido más o
313. 10:46menos cómo funciona flex es una manera
314. 10:48la verdad es que para hacerla ya out de
315. 10:50forma responsive se utiliza mucho y es
316. 10:52una forma muy moderna en css
317. 10:54de utilizarlo
318. 10:56y nada y si no estás suscrito suscríbete
319. 10:58al canal y nos veremos en el próximo
320. 11:00vídeo