Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Layout igual a printerest con flex, o no.... en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/03/2015, 19:29
Avatar de Graveworm  
Fecha de Ingreso: marzo-2015
Mensajes: 5
Antigüedad: 9 años
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
  #2 (permalink)  
Antiguo 07/03/2015, 04:23
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: Layout igual a printerest con flex, o no....

Para los layouts puedes utilizar Masonry, supongo que será más fácil que hacerlo todo con flex-boxes
  #3 (permalink)  
Antiguo 07/03/2015, 07:17
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Layout igual a printerest con flex, o no....

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:
Ver original
  1. div#rejilla {
  2.   position: absolute;
  3.   width: 100%;
  4.   height: 100%;
  5.   display: flex;
  6.   flex-flow: column wrap;
  7. }

Hay un shorthand para flex-direction y flex-wrap: flex-flow.
__________________
(:
  #4 (permalink)  
Antiguo 07/03/2015, 09:02
Avatar de Graveworm  
Fecha de Ingreso: marzo-2015
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
Respuesta: Layout igual a printerest con flex, o no....

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!

Cita:
Iniciado por pzin Ver Mensaje
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:
Ver original
  1. div#rejilla {
  2.   position: absolute;
  3.   width: 100%;
  4.   height: 100%;
  5.   display: flex;
  6.   flex-flow: column wrap;
  7. }

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

Etiquetas: background, color, flex, html, igual, layout, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:44.