1
respuesta

[Proyecto] ¿Cómo sería el CSS, usando flexbox, para organizar (pensando sólo en el posicionamiento) el siguiente HTML?

Html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="pruebas.css">
</head>

<body>
    <div class="grid">
        <div class="box">Ruby on Rails</div>
        <div class="box">Java</div>
        <div class="box">HTML</div>
        <div class="box">Python</div>
        <div class="box">Wordpress</div>
        <div class="box">Bootstrap</div>
        <div class="box">Java Web</div>
        <div class="box">MySQL</div>
    </div>
</body>

</html>

Css

.box {
    display: flex;
    height: 70px;
    width: 70px;
    background-color: green;
    margin-top: 20%;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.grid{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

![](Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad )

1 respuesta

¡Hola Guidopastorescobaribañez!

Para organizar los elementos HTML usando flexbox, es necesario hacer algunos ajustes en el CSS. En el código que compartiste, ya se está utilizando la propiedad display: flex para los elementos con la clase .box, lo que es un buen comienzo. Sin embargo, es necesario hacer algunos cambios en la clase .grid para que los elementos se posicionen correctamente.

Aquí te muestro el CSS actualizado que puedes utilizar:

.box {
  display: flex;
  height: 70px;
  width: 70px;
  background-color: green;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

Lo que se hizo fue eliminar la propiedad margin-top de la clase .box, ya que esta propiedad estaba haciendo que los elementos se desplazaran hacia abajo. Además, se cambió la propiedad justify-content de la clase .grid a center, lo que hace que los elementos se centren horizontalmente en la pantalla.

Con estos cambios, los elementos HTML deberían estar organizados correctamente. Espero que esta respuesta te haya sido útil.

¡Espero haber ayudado y buenos estudios!

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