Transcripciones
1. Introducción: Hola y bienvenidos a mi clase. Mi nombre es Dan Burgess y soy emprendedor y
desarrollador web de España, vivo en la ciudad de Nueva York. Llevo
casi diez años desarrollando aplicaciones
web. Flexbox es un
modelo de diseño CSS en el que los elementos dentro de un contenedor
se organizan automáticamente
de forma receptivo. En esta clase, repasaremos los roles más importantes de
Flexbox. Y esto te dará
una comprensión completa de cómo funciona la herramienta. Al final de la clase, deberías poder entender Flexbox e incluir un
contenedor flex en tu propio sitio web. El clase es para personas que tienen alguna experiencia
con HTML y CSS, pero no entienden completamente
flex container. Empecemos.
2. Pasos previos: De acuerdo, así que estoy usando Visual
Studio Code como mi editor. Puedes descargarlo en la página web de
Visual Studio Code. Es gratis y
es multiplataforma. Funciona en todos los sistemas
operativos. Por lo que he creado dos archivos. Llamé a uno de ellos index.html y al
otro, style.css. Y están en la misma carpeta. He abierto las dos
y están vacías en este momento. Así que voy a crear aquí mi calderas HTML que es bastante fácil en
Visual Studio Code, que es un signo de exclamación de tipo. Y nos da aquí
en BAC superior sobre eso, si hacemos clic en él, va a
crear la placa calderilla. Voy a salvarla. Voy a dejar mi archivo
style.css en blanco por ahora. Y voy a escribir algo
aquí solo para probarlo. Y voy a abrir esto. En mi caso con Live Server, servidor
en vivo, es una extensión
para Visual Studio Code. Lo tengo aquí e
instalado ya. Y sólo tenemos que
hacer clic derecho en el archivo y hacer clic en
Abrir con servidor en vivo. Entonces es una estrella luego k Ahora a veces se
abre automáticamente. Voy a abrir
esto en Chrome. Por lo que básicamente es parte 5500
ya que hay que escribir aquí. Host local colon 5500, que es el puerto y nombres de
un resolutor. Entonces estamos bien para ir. Entonces voy a
deshacerme de esto y voy a crear
algunos elementos aquí. Voy a crear un elemento div con nuestra
clase de contenedor. Eso es muy fácil de hacer
en Visual Studio Code. Solo tengo que escribir dot y luego el nombre del
contenedor de clase en este caso. Después golpeó Enter. Y ha creado un
elemento div con un contenedor de clase. Y dentro de este desarrollo, voy
a crear algunos otros divs. Voy a darle al
primero una clase de Dave, una, otra con una clase
de div dos. Hagamos 34. ¿ De acuerdo? Voy a guardar, y voy a añadir
algún texto aquí,
como, llamemos a
éste un ítem, un ítem 234. De acuerdo, voy a
refrescar la página aquí. En realidad servidor en vivo, se
actualiza automáticamente. Entonces aquí están nuestros cuatro artículos. Una cosa más,
voy a dar a todos estos elementos algún relleno y borde solo para que
podamos verlos fácilmente. Entonces para eso, voy a
decir dot container space div. Y esto significa todos los elementos
div que están dentro de un elemento con
una clase de contenedor. Y voy a decir relleno. Vamos a darles 15 píxeles y
luego bordear un px, sólido. ¿ De acuerdo? Y esto no está funcionando. Hola, no he vinculado el estilo
dot archivo CSS, así que para eso, tengo que agregar aquí en etiqueta de tipo link rel es igual a hoja de estilo, href es igual a estilo dot css. Y ahora esto está funcionando. Entonces con esto, estamos listos para empezar
a convertir el div principal en un contenedor flex y ver
qué podemos hacer con eso.
3. Crear un contenedor de flex: De acuerdo, entonces aquí, aquí, voy a agregar una regla para el div con un contenedor de
clase. Entonces para eso,
diré el contenedor. Y todas estas reglas se
van a aplicar a este div. Entonces todo lo que tenemos que
hacer para que sea un contenedor flex es decir display flex. Ahora, este es un
contenedor flex, este div aquí. Entonces esto ahora se ve diferente. Hay algunas propiedades que se
han aplicado automáticamente. Hablaremos de
ellos en un segundo. Pero básicamente es solo
una nota sobre el nomenclatura. Entonces a esto se le llama
el contenedor flex. Y estos son los elementos flex. También podemos referirnos
al contenedor flex como el padre y a los
elementos div como los hijos. Entonces al trabajar con Flexbox, vamos a tener
algunas propiedades que se aplican al padre a
su contenedor flex. Vamos a tener
algunas propiedades que se aplican a los niños. Entonces comencemos con las propiedades que
se aplican al padre, al propio contenedor flex.
4. Propiedades del envase de la flexión: Entonces la primera propiedad
va a ser flex direction y el valor
predeterminado es rho. Entonces si hago esto,
esto es redundante. No va a hacer nada. Es lo que ya tenemos. Básicamente cuando la
dirección flex es elementos de fila, los elementos se mostrarán
de izquierda a derecha. En países en los que
escribimos de izquierda a derecha, será
lo contrario
en lugares en los que las personas de derecha a izquierda, como por ejemplo, en árabe, personas de derecha a izquierda. Entonces sería lo contrario. Pero en inglés, escribimos
de izquierda a derecha. Por lo que los elementos flex se
mostrarán de izquierda a derecha. Podemos hacer en lugar de
fila, fila inversa. Y por supuesto esto lo
revertirá. Y ahora empiezan por la derecha y luego
vas a la izquierda. También podemos hacer columna. Ahora la dirección ya no
será horizontal, será vertical. Y empezamos con
el primer ítem. Y por último, por supuesto
podemos hacer columna inversa en la que ahora el ítem uno estará en la parte inferior
y luego iremos a la 34. Entonces estas son las cuatro
direcciones flex que tenemos. Entonces tenemos realmente una horizontal, ya sea en el flujo normal de textos como de izquierda a derecha
en los países occidentales. Fila inversa, que es de derecha a izquierda
en los países occidentales, columna que es como de
arriba a abajo, y columna inversa
de abajo a arriba. Voy a
deshacerme de éste. El siguiente inmueble
va a ser flex, wrap. El valor predeterminado. Él va a ser
no, envolver éste. Entonces si hago esto y salvo, no va a pasar nada y
en realidad no podemos verlo. Tengo que abrir las
herramientas de desarrollador para que lo veas. ¿ De acuerdo? Entonces si hago la ventana más pequeña, cuando no hay
suficiente espacio para ellos, se
van a encogerse. Entonces si cambiamos la
probabilidad de caída de flujo, lo que va a pasar es que cuando hacemos la ventana más pequeña, los ítems van
a empezar a envolver. Su cuarto ítem
va a ir a la siguiente línea y luego la
tercera y luego la segunda, pero van a
mantener su tamaño. Entonces veamos eso. Así que vamos a hacer aquí rap. Y ahora vemos cómo va el cuarto ítem a
la siguiente línea, etcétera. Y por último, envolver al revés. Por lo que ya puedes imaginar
lo que va a pasar. Básicamente, están
envolviendo de abajo
hacia arriba en lugar de arriba a abajo. Entonces voy a
deshacerme de esto y la siguiente probabilidad
va a ser justificar contenido. Entonces start es el valor predeterminado. Si hago esto, no pasa nada. Pero también podemos hacer aquí, y por supuesto
habrá justificado al final. Y también podemos hacer centro. Y ahora están en el centro. Y hay tres más que son interesantes y muy útiles. Uno de ellos es un espacio
entre éste. elemento uno y el punto cuatro están
al inicio y al final
del contenedor flex. Y luego todos los demás
artículos en este caso, artículo número 23 están uniformemente
espaciados dentro de ellos. También tenemos espacio son redondos. Y en este caso, todos los artículos tienen la misma
cantidad de espacio a su alrededor. Entonces éste tiene este espacio
aquí y este espacio aquí, y éste tiene este espacio
aquí y este espacio aquí. Lo que pasa con
este, claro, es que entre el ítem 12, tenemos el doble de
espacios entre el ítem uno y el inicio
del contenedor flex , por supuesto, porque aquí
tenemos el espacio que pertenece al elemento uno y al espacio que
pertenece al ítem dos. Si queremos una
cantidad igual de espacio entre todos los artículos y
también entre el primero y el último elemento
en el contenedor flex, podemos utilizar un espacio de manera uniforme. Ahora, todos los espacios son iguales y cerrando
el espacio entre el primer elemento y
el inicio
del contenedor de flujo y el cuarto elemento y el
final del contenedor flex. Voy a deshacerme de esto. Y esta siguiente propiedad
es alinear artículos. Entonces para éste, voy a añadir algunas cosas
más aquí. Por ejemplo, en el primero, agregaré un
título H2, un párrafo. En el tercero. Voy a añadir esto y
también un párrafo extra. ¿ De acuerdo? Entonces el valor predeterminado
de la propiedad align items va a ser un estiramiento. Entonces esto es redundante. Lo que esto significa es que todos
los artículos se estirarán en su altura para que coincida con la
altura del artículo más alto, que en este caso es el
artículo número tres. Si en lugar de eso, decimos aquí flex, empieza. Ahora, todos están alineados
verticalmente. En la parte superior del contenedor
flex. Si decimos centro, habrá alineados
en el medio. Y si decimos
fondo, no inferior, si decimos flex y ahí va a estar alineado en la parte inferior
del contenedor flex.
5. Propiedades del artículo de flex: Genial. Entonces echemos un vistazo a las propiedades de los niños. Entonces tenemos esto rodando aquí, pero este selector afecta a
todos los niños como grupo. vamos a
apuntar individualmente. Ahora, para eso, voy a crear una fila para cada niño. Entonces digamos 1234. Está bien, perfecto. Entonces el primero es orden
y el valor predeterminado es 0. Entonces si hago esto,
no pasa nada. Pero si en lugar de 0, pongo aquí también, aún no lo
he guardado. Pero no va a estar
en la segunda posición. Veremos qué pasa. Voy a salvarla. Ahora el primero, voy a realmente aquí, llamar a este ítem uno y ítem tres sólo para que
podamos verlos fácilmente. Entonces el punto uno está ahora al final. Y la razón por la cual es
porque todos los demás artículos, tienen orden 0 automáticamente. Entonces básicamente éste es 0, éste es 0, éste es 0, y éste tiene
el valor más alto. Entonces va al final. Si en éste le dimos
un valor de orden de tres. Ahora este div tres
irá al final. Entonces así es básicamente
como funciona. El último inmueble
que vamos a mirar es flex, crecer. Y éste es algo complicado. Así que voy a deshacerme
de esto en primer lugar. ¿ De acuerdo? Entonces así es como funciona. El valor predeterminado es 0. Entonces si digo flex crecer
0, hay redundante. Nada cambia, ¿de acuerdo? Por lo que básicamente cada elemento se toma el espacio
que necesita en, en el interior de su
contenedor flex basado en su contenido. Entonces es uno, se ha tomado suficiente espacio para
mostrar su contenido. Y el relleno que tienen, que es de 15 píxeles
en cada lado. Si en lugar de 0, ponemos esto a uno, Ya sea que en todos ellos. ¿ De acuerdo? Ahora vemos que cada
uno está tomando un cuarto del espacio disponible, que es el ancho
de la ventana. Por lo que podría ser tentador pensar que si ponemos esta a dos, ahora, estas el
subtotal de cinco unidades. Por lo que estos
tomarían como 1 quinto, y éste
tomará dos quintas partes. Pero así no es
exactamente como funciona. Permítanme salvar esto. Eso no es exactamente lo que
está pasando aquí. Si por ejemplo,
pongo esto en cuatro, va a ser
más fácil verlo. Ahora bien, si eso fuera lo que pasó, básicamente serían
siete unidades en total. Por lo que estos tomarían
como 1 séptimo cada uno, y éste
tomaría cuatro séptimos. Pero realmente este es el medio. Si éste fuera tomado
cuatro séptimos del espacio, tendría
que tomar más de la mitad y eso no
es lo que está sucediendo. Entonces así es como funciona. Básicamente, si volvimos a decir
todos a 0, están tomando este espacio y hay todo este espacio libre. Entonces cuando no se establecen a 0, es este espacio libre de
aquí hasta el final el que se divide en consecuencia en función
del número que tengan. Entonces de manera proporcional. Entonces si ponemos este a cuatro
y todos estos quieren uno. Por lo que básicamente cada uno de los tres
primeros tomará 1
séptimo de este espacio. No soy de todo el espacio, y éste
tomará cuatro séptimos de este espacio y no de todo
el espacio. Así es como funciona. Entonces pongamos este en 1114. Eso es lo que está pasando. Básicamente, su artículo ya ha garantizado el espacio
que necesita. Y es el espacio libre
restante el que se divide en consecuencia. Básicamente, como todo el espacio se considera que vale
la pena la cantidad total de unidades, como siete en este caso. Y luego se divide
y lo agrega a su div en
consecuencia al número
que tienen aquí. Entonces si configuramos este en 0, éste sólo
tendrá el espacio que naturalmente tiene eso
es suficiente para ello. Y ahora estoy, el resto
del espacio libre se agrega
en consecuencia a estos. Ahora, por ejemplo, el
espacio libre se divide por seis. Y estos recibieron como 1 sexto del espacio libre de nuevo. Y éste recibe por
seis del espacio libre. Es un poco complicado,
pero así es como funciona.
6. Outro: Gracias por tomar mi clase
y espero que haya sido de ayuda. Te animo a experimentar
y tratar de jugar con las diferentes
propiedades en todos los diferentes flex sus
axiomas que están disponibles. Gracias de nuevo, y te
veré en mi próxima clase.