Saltar al contenido principal
Codigo Heroe
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión
  1. Principal
  2. Todos los cursos
  3. Distribución de páginas
  1. Modelo de cajas
  2. Posicionamiento
  3. Distribución general de la página
  4. Distribución de componentes
  5. Distribuciones complejas de componentes

Distribuciones complejas de componentes

Conoceremos el eje transversal de flexbox y las áreas de grid. Veremos cómo construir una distribución cuando la estructura y las medidas del componente no son evidentes en el diseño. Alinearemos elementos por separado y cambiaremos su orden visual sin modificar el HTML. Construiremos un carrusel y una tarjeta con una distribución asimétrica.
Ancho y relleno de las tarjetas Tarea
Márgenes entre elementos flex Tarea
La propiedad align-items en flexbox Tarea
La dirección del eje principal Tarea
El orden visual con order Tarea
La propiedad align-self en flexbox Tarea
Márgenes y rellenos de los elementos flex Tarea
Prueba de una imagen más grande Tarea
Imágenes que se ajustan al contenedor Tarea
Una tarjeta con dos columnas Tarea
Una distribución asimétrica con tres columnas Tarea
Áreas de grid Tarea
Áreas que ocupan varias filas Tarea
Reglas de las áreas de grid Tarea
La propiedad align-self en grid Tarea
Ajustar el ancho de las columnas Tarea
La propiedad justify-self Tarea
Prueba de la tarjeta con más contenido Tarea
Codigo Heroe

© 2023-2026, codigoheroe.com