Saltar al contenido principal
Codigo Heroe
Desafío anterior
Flexbox. Nivel 1 — Visuales de juego14/18
Ver desafíos del nivel
  1. 1. Activación del contenedor flexible I
  2. 2. Activación del contenedor flexible II
  3. 3. Propiedad de dirección del eje principal
  4. 4. Dirección del eje principal I
  5. 5. Dirección del eje principal II
  6. 6. Dirección del eje principal III
  7. 7. Dirección del eje principal IV
  8. 8. Propiedad de distribución en el eje principal
  9. 9. Distribución en el eje principal I
  10. 10. Distribución en el eje principal II
  11. 11. Distribución en el eje principal III
  12. 12. Distribución en el eje principal IV
  13. 13. Distribución en el eje principal V
  14. 14. Propiedad de alineación en el eje transversal
  15. 15. Alineación en el eje transversal I
  16. 16. Alineación en el eje transversal II
  17. 17. Alineación en el eje transversal III
  18. 18. Alineación en el eje transversal IV
Siguiente desafío
  • Skill Atlas

Cargando…
Estará listo en unos segundos.

  • Desafío

Propiedad de alineación en el eje transversal

Replica el ejemplo modificando el código
DificultadMedia
CategoríaHTML/CSS
Ahora
Estado actual de la página
Ejemplo
Resultado que debes obtener
ResultadoAparecerá después de la primera comprobaciónAparecerá después
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Desafío</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="local-14.css"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="stage stage-calibrate"> <section class="target cards" aria-label="línea de calibración de energía"> <article class="item">A-01</article> <article class="item">B-02</article> <article class="item">C-03</article> </section> </main> </body> </html>
CSS
.cards { display: flex; justify-content: center; property: center; } /* Reemplaza el nombre property por la propiedad de Flexbox correcta para que el resultado coincida con el modelo. Pistas: Propiedades posibles: justify-content items-align align-items flex-direction */
Vista previa

El código cambió. Haz clic en «Actualizar» o activa la ejecución automática.

Saliste de la página del desafío.

Haz clic dentro de la vista previa para enfocar esta ventana.

100%
0
    Completado 0%.
    Codigo Heroe

    © 2023-2026, codigoheroe.com