Layout igual a printerest con flex, o no....

[Graveworm]

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

[PHPeros]

Para los layouts puedes utilizar Masonry, supongo que será más fácil que hacerlo todo con flex-boxes

[pzin]

Tienes que especificar que flex-direction sea column y luego añadir una posición absoluta al contenedor, para que los hijos ocupen el espacio.

Código CSS:

div#rejilla {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column wrap;
}
 

Hay un shorthand para flex-direction y flex-wrap: flex-flow.

[Graveworm]

Gracias por la sugerencia PHPeros, pero no quiero usar js, me gustaria saber mas que nada si es posible hacerlo con CSS Flex.

pzin, la opcion que tu me dices si los acomoda de manera fluida, pero quiero que sigan los numeros ascendiendo hacia la derecha, si pongo el valor "column" me pone el 2 debajo del 1 y el 3 al lado del 1, yo quiero que pase lo mismo pero sin desordenar los numeros, te agradeceria mucho tu paciencia ya que nunca he trabajado con flex :D!

Iniciado por pzin

Tienes que especificar que flex-direction sea column y luego añadir una posición absoluta al contenedor, para que los hijos ocupen el espacio.

Código CSS:

div#rejilla {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column wrap;
}
 

Hay un shorthand para flex-direction y flex-wrap: flex-flow.