0

Este es mi problema, antes usaba "column-gaps:6;" para que me permita hacer esto, pero cada vez que cargaban mas posts, se desordenaban, y aun poniendo "position:absolute" o algun otro atributo, no se solucionaba Asi que probe flexbox, el cual funciono, sin embargo no quedo de la misma forma:

Ej (Ilustracion):

introducir la descripción de la imagen aquí

CSS:

.posts-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    align-items: flex-start;
    justify-content: space-between;
}

.posts-container .post-container {
    width: 175px;
    height: auto;
    display: inline-block;
    margin-bottom: 15px;
    padding: 0px 5px;
    background-color: #463E3F;
    border-radius: 5px;
}

HTML:

<div class="posts-container" id="posts-container">
   <div class="post-container"></div>
   <div class="post-container"></div>
   <div class="post-container"></div>
   <div class="post-container"></div>
   <div class="post-container"></div>
   <div class="post-container"></div>
   <div class="post-container"></div>
   <div class="post-container"></div>
</div>

Muchas gracias de antemano.

8
  • Si lo que buscas es generar un espacio entre y al rededor de los flex-items entonces ¿no ayuda un margin aplicado a todos los elementos con la misma medida?
    – user128299
    Commented el 20 nov. 2020 a las 2:15
  • @BetaM Ya esta aplicado el margin, sin embargo el flexbox no me deja hacer ese efecto, aunque use el "align-items:flex-start", la proxima row de posts, comienza donde termina el mas grande de la primera
    – RadioAF
    Commented el 20 nov. 2020 a las 2:18
  • 1
    Ok es que la pregunta es confusa, entonces la duda es como lograr un diseño como el de la imagen manteniendo flexbox?
    – user128299
    Commented el 20 nov. 2020 a las 2:20
  • @RadioAF Esto te puede servir: medium.com/@andybarefoot/… Commented el 20 nov. 2020 a las 2:20
  • 1
    @UrielManzano Muchas gracias, me sirvió para entender un poco mejor, sin embargo no me funciono bien, no se si por como ubique cada atributo o como, pero gracias!
    – RadioAF
    Commented el 20 nov. 2020 a las 19:41

1 respuesta 1

0

Si no te causa problemas cambiar el código podrias revisar esta implementación.

Referencia: Tablero responsivo Ejemplos: Ejemplos tableros responsivos

.boardz {
    display: flex;
    justify-content: space-between;
    flex: auto;
}
.boardz ul {
    list-style-type: none;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0px 4px 0px;
    flex: 1;
}
.boardz ul li {
    margin: 8px 4px 8px 4px;
    padding: 12px;
    flex: auto;
    background-color: #ffffff;
    border: 1px solid #737373;
}
.boardz ul h1 {
    margin: 0 0 10px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid gray;
}
@media screen and (max-width: 800px) {
    .boardz {
        flex-direction: column;
    }
    .boardz ul li:last-child {
        margin-bottom: 0;
    }
    .boardz ul {
        margin: 0;
        padding: 0;
    }
}
.fitted ul {
    display: flex;
}
.fitted ul li {
    margin: 4px 4px 4px 4px !important;
}
.boardz img {
    max-width: 100%;
    height: auto;
}
.beautiful li {
    border: none !important;
    border-radius: 10px;
    background-color: #f1f1f1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.beautiful li:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.centered-block {
    margin: auto;
}
<div class="boardz centered-block">
  <ul>
      <li>
          <img src="https://kingofwallpapers.com/poster/poster-003.jpg" alt="demo image"/>
      </li>

      <li>
          <img src="https://2.bp.blogspot.com/-pINYV0WlFyA/VUK-QcGbU5I/AAAAAAAABcU/fNy2pd2cFRk/s1600/WEB-Jack-White-Poster-Creative.png" alt="demo image"/>
      </li>

      <li>
          <img src="https://payload140.cargocollective.com/1/10/349041/5110553/Florrie.jpg" alt="demo image"/>
      </li>                    
  </ul>
  <ul>
      <li>
          <img src="https://cdn3.volusion.com/prakm.mcyzp/v/vspfiles/photos/TWAMBLUE-2.jpg" alt="demo image"/>
      </li>
      <li>
          <img src="https://wpmedia.ottawacitizen.com/2015/11/01.jpg?quality=55&strip=all&w=840&h=630&crop=1" alt="demo image"/>
      </li>
      <li>
          <img src="https://s-media-cache-ak0.pinimg.com/736x/8c/ee/ff/8ceeff967c03c7cf4f86391dd6366544.jpg" alt="demo image"/>
      </li>
      <li>
          <img src="https://s-media-cache-ak0.pinimg.com/originals/87/16/8c/87168cbbf07cb54a9793bebaa20b1bde.jpg" alt="demo image"/>
      </li>
  </ul>
  <ul>
      <li>
          <img src="https://images.fromupnorth.com/077/54a12d7458673.jpg" alt="demo image"/>
      </li>
      <li>
          <img src="https://s-media-cache-ak0.pinimg.com/736x/22/95/48/229548086245c332443109ca9f2e0890.jpg" alt="demo image"/>
      </li>
      <li>
          <img src="https://inspirationfeeed.files.wordpress.com/2014/01/ca402f7410884454ec5c303336e8591d1.jpg" alt="demo image"/>
      </li>
  </ul>         
</div>

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.