portada del curso
  • Duración del curso00:50 Horas
  • Lanzamiento 15 julio 2021
  • CostoGRATIS

En este curso aprenderas:

Un área del documento que contiene un flexbox es llamada contendedor flex. Para crear un contenedor flex, establecemos la propiedad del área del contenedor display como flex o inline-flex. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven ítems flex. Como con todas las propiedades de CSS, se definen algunos valores iniciales.

Descripción

El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este curso practico hace un repaso de las principales características de flexbox, las que exploraremos con mayor detalle en el resto de estas guías.

Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del Grid Layout de CSS, el cual controla columnas y filas a la vez.

Líneas de inicio y de fin

Otra área vital de entendimiento es cómo flexbox no hace suposiciones sobre la manera de escribir del documento. En el pasado, CSS estaba muy inclinado hacia el modo de escritura horizontal y de izquierda a derecha. Los métodos modernos de layout acogen la totalidad de modos de escritura así que no es necesario asumir que una línea de texto empezará arriba del documento y correrá de izquierda a derecha, con nuevas líneas dispuestas una abajo de la otra.

Puede leer más acerca de la relación que hay entre flexbox y la especificación de los Modos de Escritura en un artículo posterior, sin embargo la siguiente descripción debería ayudar para explicar porqué no se habla de izquierda y derecha ni de arriba o abajo a la hora de describir la dirección en la que fluyen los ítems flex.

Si flex-direction es row y estoy trabajando en español, entonces el margen inicial del eje principal quedará a la izquierda, y el margen final a la derecha.

Clases

  • 11 clases en total
  • Introducción00:56
  • Conceptos básicos02:29
  • Propiedades Flexbox, para el contenedor06:21
  • Propiedades Flexbox, para los elementos02:01
  • Ejemplos Propiedades Flexbox06:14
  • Ejemplo cajas06:48
  • Ejemplo con saltos02:11
  • Agregando menú10:24
  • Integración Bootstrap06:19
  • Saltos con Bootstrap06:11
  • Despedida00:30

Comentarios

3.5
Basado en 2 calificaciones
4 Estrellas
3 Estrellas

JR
Jesus Miguel Ramon – hace 3 años

Bastante bueno, bien para empezar en el frontend

JM
Josue Heber Mendoza – hace 3 años

Lo hizo parecer tan fácil, tantas cosas por aprender, necesitare más cursos al respecto, espero poder seguir con la capacitación, excelente