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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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