1

¡Hola Comunidad!

Necesito alinear hacia la izquierda unos elementos que tengo en un div contenedor, he leído varios tutoriales en ingles y español de StackOverflow pero no me funcionan y la mayoría utilizan porcentajes en el ancho de los elementos mientras que los míos son definidos en pixeles.

Para distribuirlos utilizo Flexbox con justify-content: space-evenly debido que al momento de hacerlo responsive me agrada mas el espacio que hay entre los elementos que con cualquier otra propiedad.

Adjunto imágenes:

Como se ve ahora:

introducir la descripción de la imagen aquí

Como quiero que se vea:

introducir la descripción de la imagen aquí

Ya por ultimo dejo el código y espero que me ayuden a encontrar una solución:

 * {
        margin: 0;
        padding: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        box-sizing: border-box;
 }

        .Contenedor {
            width: 90%;
            max-width: 880px;
            margin: 0 auto;
            padding: 30px 0;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            background-color: #f5f5f5;
        }

        .Elemento {
            width: 210px;
            height: 280px;
            margin-top: 10px;
            padding: 10px;
            position: relative;
            border-radius: 4px;
            border: 1px solid #cccccc;
            background-color: #ffffff;
        }
<div class="Contenedor">
     <div class="Elemento"></div>
     <div class="Elemento"></div>
     <div class="Elemento"></div>
     <div class="Elemento"></div>
     <div class="Elemento"></div>
     <div class="Elemento"></div>
     <div class="Elemento"></div>
</div>

2 respuestas 2

0

El uso de justify-content: space-evenly; imposibilita que la última fila se comporte como esperas, puedes añadir un contenedor adicional por fila pero eso condiciona mucho el diseño y entiendo no es lo que buscas, sin embargo, si aplicas un sinple justify-content: left; y añades un margin-left a cada elemento, el efecto final se asemeja mucho a lo que buscas, además como se indica la separación lateral igual a la separación superior, el efecto de "grid" queda más conseguido, es decir, el espacio en blanco entre los elementos es el mismo en todas las direcciones.

 * {
        margin: 0;
        padding: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        box-sizing: border-box;
 }

        .Contenedor {
            width: 90%;
            max-width: 890px;
            margin: 0 auto;
            padding: 30px 0;
            display: flex;
            justify-content: left;
            flex-wrap: wrap;
            background-color: #f1f1f1;
        }

        .Elemento {
            width: 210px;
            height: 280px;
            margin-top: 10px;
            margin-left: 10px;
            padding: 10px;
            position: relative;
            border-radius: 4px;
            border: 1px solid #cccccc;
            background-color: #ffffff;
        }
<div class="Contenedor">
     <div class="Elemento"></div>
     <div class="Elemento"></div>
     <div class="Elemento"></div>
     <div class="Elemento"></div>
     <div class="Elemento"></div>
     <div class="Elemento"></div>
     <div class="Elemento"></div>
</div>

He ampliado el contendor en 10px para que con 4 elementos se vean perfectamente centrados.

0

Los detalles:

  • El usar space-evenly generará un espacio entre los elementos
  • No dispones del número suficiente de elementos en el segundo renglón por lo cual estos serán redistribuidos a lo largo de su espacio disponible con el efecto que la propiedad antes mencionada genera
  • Para la separación entre elementos podemos hacer uso de un margin de al menos 1 px
  • No veo por que tener 2 width uno con medida exacta en px y otro con porcentajes;
  • Si tratas de que el contenedor no cambie entonces establece con px un width
  • Si quieres que el contenedor mueva los elementos de acuerdo con el viewport entoncess sería mejor hacer uso de porcentajes (pero esto depende de que punto estás tratando de lograr)

Propuesta

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        body{
          margin: 0;
        }
        .contenedor {
          background-color: tomato;
          width: 50%;
          margin: 0 auto;
          display: flex;
          flex-wrap: wrap;
        }
        .elemento {
          background-color: rgba(255, 255, 255, 0.5);
          height: 200px;
          width: 120px;
          border: 1px solid;
          margin: 1px;
        }
      </style>
    </head>
    <body>
    <div class="contenedor">
      <div class="elemento">1</div>
      <div class="elemento">2</div>
      <div class="elemento">3</div>
      <div class="elemento">4</div>
      <div class="elemento">5</div>
      <div class="elemento">6</div>
      <div class="elemento">7</div>
    
    </div>
    </body>
    </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.