Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/03/2015, 19:29
Avatar de Graveworm
Graveworm
 
Fecha de Ingreso: marzo-2015
Mensajes: 5
Antigüedad: 9 años, 9 meses
Puntos: 0
Layout igual a printerest con flex, o no....

Hola, estoy tratando de crear una rejilla de divs con flex pero me atore en un detalle, soy nuevo en el uso de flex y quiero que sea masomenos asi como se muestran los enlaces de [URL="http://www.dreamgrow.com/wp-content/uploads/2012/01/pinterest-brand-pages-mashable.jpg"]printerest[/URL], que sean de un ancho predeterminado pero que sean de diferente altura, que se ajusten a los espacios vacios entre uno y otro de manera vertical, aqui pongo mi codigo que tengo y el resultado que llevo:

CSS:
Código:
div#rejilla {
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap;
}
div#rejilla div {  
  width: 200px;
  color: #FFF;
  font-size:40px;
}
HTML
Código:
<div id="rejilla">

    <div style="height:250px; background:#9C0;">1</div>
    <div style="height:260px; background:#d60;">2</div>
    <div style="height:220px; background:#09F;">3</div>
    <div style="height:230px; background:#96C;">4</div>
    <div style="height:200px; background:#699;">5</div>
    <div style="height:250px; background:#F30;">6</div>
    <div style="height:240px; background:#a90;">7</div>
    <div style="height:210px; background:#393;">8</div>
    <div style="height:230px; background:#9CF;">9</div>
    <div style="height:250px; background:#F9C;">10</div>
    <div style="height:200px; background:#639;">11</div>
    <div style="height:230px; background:#063;">12</div>
    <div style="height:250px; background:#9C9;">13</div>
    <div style="height:220px; background:#066;">14</div>
    <div style="height:240px; background:#96C;">15</div>
    <div style="height:260px; background:#393;">16</div>
    <div style="height:230px; background:#09F;">17</div>
    <div style="height:220px; background:#9C0;">18</div>
    <div style="height:240px; background:#699;">19</div>

</div>
Hasta ahorita llevo esto, pero quiero que se coma el espacio en blanco entre la separacion vertical, no se si se pueda hacer eso con flex o alguna otra forma para realizarlo... el flex-direction si se usa como "column" se puede, pero los crea hacia abajo y no hacia la derecha que es lo que quiero.



Espero alguien pueda ayudarme, ya quise hacer trampa viendo su codigo pero no encontre nada u.u