Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

desafio hora de practica layout

Referente al curso CSS: Flexbox y layouts responsivos, en el capítulo Menu flexible y actividad Desafío: manos a la obra

por Estudiante
| 48.5k xp | 5 posts

Editor de codigo:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

codigo de edicion en css

  • { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: "Jura", sans-serif; background: linear-gradient(180deg, #154580 0%, #041833 100%); color: white; height: 100vh; width: 100vw; }

.titulo { position: absolute; top: 30px; left: 180px; font-size: 34px; font-weight: bold; text-decoration: underline 3px; text-underline-offset: 25px; }

.cuadros__container { width: 1150px; height: 600px; position: absolute; left: 176px; top: 120px; background: #525c63d8; padding: 10px; border-radius: 10px; }

.cuadros__container{ display:flex; flex-wrap:wrap;

}

.html{ order:-1;

}

.tailwind{ order:4; }

.js{
order:4

}

.css{ order:3; }

1 respuesta
por Ingrid Silva
| 1732.2k xp | 5587 posts
Instructor

¡Hola! Parece que estás tratando de ajustar el diseño de la página utilizando propiedades flexbox en CSS. Para lograr el diseño deseado, puedes hacer uso de las propiedades flexbox como flex-direction, justify-content y align-items para organizar los elementos de la manera correcta.

Aquí tienes un ejemplo de cómo podrías ajustar el código para lograr el diseño deseado:

.cuadros__container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 1150px;
  height: 600px;
  position: absolute;
  left: 176px;
  top: 120px;
  background: #525c63d8;
  padding: 10px;
  border-radius: 10px;
}

En este ejemplo, se utiliza display: flex para convertir el contenedor en un contenedor flex, flex-direction: row para alinear los elementos en fila, justify-content: space-between para distribuir los elementos a lo largo del eje principal con espacios entre ellos, y align-items: center para alinear los elementos verticalmente en el centro del contenedor.

Espero que este ejemplo te ayude a resolver el desafío. ¡Buena suerte con tu práctica en CodePen!

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!