1

Estoy creando una galería de imágenes con diferente tamaño usando flexbox, hasta ahora tengo un código que funciona bien pero ya no puedo agregarle mas elementos ya que se empiezan a posicionar encima de los demás y no entiendo por que

.gallery-images .img {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 480px) {
  .gallery-images {
    width: 100%;
    margin: auto;
  }
}
@media screen and (min-width: 480px) {
  .row-images {
    display: flex;
    height: 250px;
  }
}
@media screen and (min-width: 650px) {
  .row-images {
    display: flex;
    height: 300px;
  }
}
@media screen and (min-width: 800px) {
  .row-images {
    display: flex;
    height: 400px;
  }
}
@media screen and (min-width: 1000px) {
  .row-images {
    display: flex;
    height: 500px;
  }
}
@media screen and (min-width: 480px) {
  .column-1-3 {
    width: 33.33%;
  }
  .column-2-3 {
    width: 66.67%;
  }
  .column-1-2 {
    width: 50%;
  }
}
.img {
  padding: 5px;
  border: solid 1px #fff;
}
.img-small {
  background-color: #90ee90;
  height: 50%;
  width: 100%;
}
.img-medium {
  background-color: #add8e6;
  height: 100%;
  width: 100%;
}
.img-large {
  background-color: #ff6347;
  height: 100%;
  width: 100%;
}
<div class="gallery-images">
  <div class="row-images">
    <div class="column-1-3">
      <div class="img img-small">Small</div>
      <div class="img img-small">Small</div>
    </div>
    <div class="column-2-3">
      <div class="img img-medium">Medium</div>
    </div>
  </div>
  <div class="row-images">
    <div class="column-2-3">
      <div class="row-images">
        <div class="column-1-2">
          <div class="img img-large">Large</div>
        </div>
        <div class="column-1-2">
          <div class="img img-small">Small</div>
          <div class="img img-small">Small</div>
        </div>
      </div>
      <div class="row-images">
        <div class="img img-medium">Medium</div>
      </div>
    </div>
    <div class="column-1-3">
      <div class="img img-small">Small</div>
      <div class="img img-large">Large</div>
      <div class="img img-small">Small</div>
    </div>
  </div>
  <div class="row-images">
    <div class="column-1-2">
      <div class="column-1-2">
        <div class="img img-small">Esto no deberia estar aqui</div>
        <div class="img img-small">Esto no deberia estar aqui</div>
      </div>
      <div class="column-1-2">
        <div class="img img-small">Esto no deberia estar aqui</div>
        <div class="img img-small">Esto no deberia estar aqui</div>
      </div>
    </div>
  </div>
</div>

1 respuesta 1

2

no estoy seguro de a que layout quieres llegar, seria bueno que lo aclararas, pero mientras puedo sugerir algunas cosas:

declara flex-flow, sin esta propiedad flexbox no funciona adecuadamente:

#elemento{
  display:flex;
  flex-flow:row wrap;
  /* "row", los elementos se alinean horizontalmente*/
  /* "wrap", si no caben forman otra linea*/
  justify-content:center;
  align-items:center;
}

tambien ayúdate del overflow:

*{
  overflow: auto;
  /* se añade a todos los elemento por defecto*/
}
#elemento{
  overflow: hidden;
  /* los elementos que se salgan del padre seran recortados*/
}

esto te permite controlar el flujo de los hijos.

otras propiedades que pueden ser utiles:

*{
  position: relative;
  /*posicionamiento con respecto al padre*/
  height: auto;
  /*crecimiento con respecto al contenido*/
  display: block;
  /*te ahorras comportamientos propios de ciertos elementos*/
  /*se anula con display:inline-block;*/
}

estoy pendiente de tu actualización

1
  • 1
    @AXL El voseo es una forma de conjugación válida. Por favor, no modifiques las formas verbales a "tú" cuando el autor no las usa.
    – Mariano
    el 12 abr. 2017 a las 8:02

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.