php - w2school - utilizando flexbox para obtener diseño de mampostería pinterest o jQuery
html flex direction (4)
En realidad, puedes hacerlo sin mayores problemas usando flexbox. El único inconveniente es que debe especificar una altura absoluta para el contenedor, a fin de que el contenido del mismo realmente se ajuste. De lo contrario, todo se establecería a lo largo de una gran columna interminable.
El HTML:
<div class="wrapper">
<div class="red"></div>
<div class="blue"></div>
<div class="pink"></div>
<div class="purple"></div>
<div class="green"></div>
<div class="yellow"></div>
<div class="brown"></div>
</div>
El CSS (sin prefijo):
.wrapper {
background: black;
display: flex;
flex-flow: column wrap;
height: 450px;
align-items: center;
}
.wrapper > div {
height: 100px;
margin: 5px;
width: 100px;
}
.wrapper > :nth-child(3n+2) {
border: 2px solid white;
height: 300px;
}
También hice un JS Fiddle , así que puedes ver el resultado directamente.
Sin embargo, en pocas palabras, el truco es usar flex-direction: column en combinación con flex-wrap: wrap y una altura fija para el wrapper.
Sin embargo, tengo que agregar que esto parece ser el escenario para el que se escribió la especificación de columnas CSS, por lo que la solución de KatieK podría ser una mejor manera de hacerlo. Sobre todo, no es necesario especificar una altura fija para el contenedor cuando se usan columnas CSS en lugar de flexbox.
Quería saber si es posible obtener el mismo tipo de diseño que mampostería pinterest o jQuery usando solo el nuevo diseño de flexbox. Aquí está tan lejos como lo tengo:
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.item {
width: 220px;
height: 250px;
margin: 10px auto;
padding: 0;
background: #ccc;
}
.item:nth-child(3n+2) {
background: #aaa;
height: 400px;
}
y el HTML, solo estoy usando un bucle de PHP para crear 12 elementos
<?php
for ($i=0; $i<=11; $i++) {
echo ''<div class="item"></div>'';
}
?>
Es completamente posible.
Gracias a la respuesta original de @ leopld, pude crear uno que no depende de una altura fija.
Al hacer la position: absolute contenedor flexible position: absolute o position: fixed , puede lograr que llene dinámicamente el espacio disponible.
Enlace al Codepen: http://codepen.io/anon/pen/Jpnyj?editors=110 . Incluí todos los prefijos de proveedor que necesitaría en este momento.
Margen
<div class="wrapper">
<div class="box box-red"></div>
<div class="box box-blue"></div>
<div class="box box-pink"></div>
<div class="box box-purple"></div>
<div class="box box-green"></div>
<div class="box box-yellow"></div>
<div class="box box-brown"></div>
<div class="box box-red"></div>
<div class="box box-blue"></div>
<div class="box box-pink"></div>
<div class="box box-purple"></div>
<div class="box box-green"></div>
<div class="box box-purple"></div>
<div class="box box-green"></div>
<div class="box box-yellow"></div>
<div class="box box-blue"></div>
<div class="box box-pink"></div>
<div class="box box-purple"></div>
<div class="box box-green"></div>
<div class="box box-yellow"></div>
<div class="box box-red"></div>
<div class="box box-brown"></div>
<div class="box box-blue"></div>
<div class="box box-red"></div>
<div class="box box-green"></div>
<div class="box box-yellow"></div>
<div class="box box-brown"></div>
</div>
Estilos
body {
background: black;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.box {
margin: 5px;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.box-red {
height: 100px;
background: red;
}
.box-blue {
height: 120px;
background: blue;
}
.box-pink {
height: 144px;
background: pink;
}
.box-purple {
height: 250px;
background: purple;
}
.box-green {
height: 200px;
background: green;
}
.box-yellow {
height: 20px;
background: yellow;
}
.box-brown {
height: 290px;
background: brown;
}
Las columnas de CSS3 te acercarán bastante a ese diseño. (Tenga en cuenta que la compatibilidad en navegadores no recientes puede ser deficiente, y la especificación puede cambiar en el futuro). El otro ejemplo no funcionó con FF, pero este sí lo hace:
HTML:
<div id="wrapper">
<div id="cols">
<div class="item">
<img src="http://placekitten.com/400/700?image=1" />
<p>0) Craft beer farm-to-table.</p>
</div>
<div class="item">
<img src="http://placekitten.com/400/450?image=2" />
<p>1) Mollit wolf veniam, leggings art party semiotics Brooklyn High Life sustainable occaecat Banksy actually.</p>
</div>
[more items]
</div>
</div>
CSS:
h1, h2, ul, p {margen: 1rem; }
#wrapper {
width: 900px;
margin: 20px auto;
padding: 10px;
outline: solid black 1px;
background-color: gainsboro;
}
#cols {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
column-count: 3;
column-gap: 10px;
}
.item {
display: inline-block;
background: #FEFEFE;
margin: 0;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 10px;
}
.item img {
width: 100%;
border-bottom: 1px solid black;
padding-bottom: 10px;
margin-bottom: 5px;
}
.item p {
font-size:small;
margin: 0;
}
O juega con el ejemplo completo .
Actualización: Que yo sepa, no hay forma de hacer esto con Flexbox. Flexbox está más preocupado por el diseño horizontal, no vertical. Me gustaría que se demuestre que estoy equivocado, pero eso es lo que he deducido de mi experiencia limitada con él. Si desea obtener más información, el mejor artículo que he encontrado sobre el tema es este: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ (Sí, por supuesto, es Chris Coyier . ¿Cómo lo has adivinado?
En cualquier caso, incluso si puedes hacerlo con Flexbox, sería un poco complicado, porque eso no es para lo que es Flexbox. Hay una forma mucho más limpia de hacerlo con columnas CSS3 . Aquí hay un ejemplo .
Sin embargo, la compatibilidad con el navegador no es la mejor: http://caniuse.com/#search=column%20layout. Incluso este ejemplo no parece ser compatible con Firefox, aunque no tengo ni idea de por qué, ya que FF sí admite el respectivo propiedades, de acuerdo con CanIUse.
Entonces, un resumen y TLDR: es una idea admirable, hacer esto en CSS puro, pero para la mayoría de los propósitos prácticos es imposible en este momento. Es probable que sea mejor ir con JQuery Masonry