Flexbox en CSS y HTML (Tutorial) - desarrollar diseños adaptables

Esto es lo que puedes esperar en el curso Flexbox en CSS y HTML.

¿Qué es el diseño flexbox y por qué hay que utilizarlo?

Aquí se establece el proyecto en el que se seguirá trabajando.

Aquí presento la estructura de ejemplo y las opciones de depuración integradas en VS Code con las herramientas de MS Edge. En este vídeo también se activa por primera vez el layout flexbox y se establece la dirección.

¿Cómo se puede dividir el espacio uniformemente o en determinadas proporciones en el diseño flexbox?

Un pequeño ejercicio que requiere un poco de matemáticas (sencillas).

Aquí presento un diseño horizontal con dos barras laterales que se adapta responsivamente al ancho.

Los elementos hijos pueden ser alineados por el contenedor flex a lo largo del eje transversal. Aquí muestro cómo se puede establecer esto.

La alineación de todos los elementos hijos puede ajustarse no sólo para el contenedor, sino también para los elementos individuales utilizando align-self.

Un pequeño ejercicio de alineación individual con un cubo.

No sólo puede alinear a lo largo del eje transversal en un contenedor flexible, también puede ajustar la alineación a lo largo del eje principal ;-)

Un pequeño ejemplo de cómo alinear a lo largo del eje principal puede utilizarse muy bien para un diseño frecuente.

Si quiere ser flexible, también necesita poder especificar el tamaño de los elementos hijos independientemente de la anchura o altura específicas. Afortunadamente, existe la propiedad flex-basis, con la que puedes conseguir exactamente esto. Si cambias la dirección flex, una anchura se convierte en una altura y viceversa.

¿Cuánto debe crecer un elemento si hay más espacio disponible del que especifica flex-basis? Esto puede establecerse específicamente con flex-grow.

¿Cuánto debe encogerse un elemento si hay menos espacio del que especifica flex-basis? Esto puede establecerse específicamente con flex-shrink.

Los elementos hijos no sólo pueden encogerse si hay menos espacio, sino que también pueden ser envueltos por el contenedor. Te muestro cómo controlar esto con flex-wrap en este vídeo.

flex-direction y flex-wrap pueden combinarse en la propiedad flex-flow. Esto incluso tiene sentido si sólo desea establecer flex-dirección, como flex-flujo es más corto ;-)

Una tarea para el envoltorio flexible.

El espaciado es a veces necesario para evitar que resulte innecesariamente incómodo para el ojo humano. Afortunadamente, gap es una propiedad CSS que hace exactamente esto para los elementos hijos de un contenedor flex.

El orden es imprescindible, sobre todo para las interfaces web, porque deben ser fáciles de usar. A veces también es necesario definir el orden individualmente sin mover elementos en el DOM. La propiedad CSS orden es muy adecuada para esto, ya que permite cambiar fácilmente el orden visible de los elementos.

Vamos a comprobar si has entendido la secuencia. Incluso hay una segunda forma de conseguir el mismo resultado, pero seguro que también la descubres.

Ocurre muy a menudo que quieres centrar elementos y especialmente texto horizontal y verticalmente (!). Lo que antes de Flexbox era un calambre, con Flexbox es una fiesta de cumpleaños infantil.

¿Quién no conoce el divisor de 3? Si se adapta al espacio disponible, no queda mucho para un diseño responsive.

¿Existen sitios web sin formularios? Si es así, no hay muchos. Por eso es muy importante organizarlos de forma atractiva, lo que afortunadamente no es problema con Flexbox.

Muy a menudo hay que lidiar con diseños anidados, pero con Flex-Layout incluso estos ya no son un gran desafío.

Hoy en día, los clientes de chat web son una docena y los chatbots de IA se han añadido a la lista. Pero, ¿cómo se puede realizar un chat con Flexbox? Te lo mostraré en este vídeo.

Desde la Web 2.0 a más tardar, se puede encontrar una galería en casi todos los sitios web. En este vídeo describo cómo un diseño de este tipo se puede realizar maravillosamente con Flexbox, por ejemplo.

Ahora todo debería estar claro en lo que respecta al diseño Flex. Por último, describiré lo que deberías haber aprendido, qué más puedes hacer y qué otras fantásticas opciones de diseño CSS existen.