CSS Flexbox | Dan Berges | Skillshare
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      1:14

    • 2.

      Pasos previos

      4:42

    • 3.

      Cómo crear un contenedor flexible

      1:29

    • 4.

      Propiedades de contenedores

      7:21

    • 5.

      Propiedades de los elementos flexibles

      6:35

    • 6.

      CIERRE

      0:29

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

126

Estudiantes

2

Proyectos

Acerca de esta clase

En esta clase te paso a través de todas las reglas principales para el contenedor flexible (padre) y los artículos flexibles (niños) que son responsables de la fluidez del diseño de cajas flexibles, AKA Flexbox.

Se requiere equipo.

Habilidades requeridas: experiencia en HTML y CSS.

Sitio web de Visual Studio:

https://code.visualstudio.com

Conoce a tu profesor(a)

Teacher Profile Image

Dan Berges

Entrepreneur & Web Developer

Profesor(a)

Hi! My name is Dan, and I am an entrepreneur, web developer, Spanish language teacher, musician and writer from Madrid, Spain, living in NYC.

I founded Berges Institute in 2013 and Berges Technologies in 2021. In my spare time, I make videos and courses about music, business and web development.

If you like my content, please do follow my profile. And if you have any questions or comments about any of my classes, feel free to message me!

Ver perfil completo

Habilidades relacionadas

Desarrollo Lenguajes de programación CSS
Level: Intermediate

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

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.