使用flexbox获取pinterest或jQuery砖石布局 [英] using flexbox to get pinterest or jQuery masonry layout

问题描述

想知道是否可以获得与pinterest相同类型的设计布局，或者只使用新的flexbox布局的jQuery masonry。这里是我得到的：

  .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; 
} 
  

和HTML我只是使用PHP循环来创建12个项目

 <？php 
 for（$ i = 0; $ i <= 11; $ i ++）{
 echo'< div class =item>< / div>'; 
} 
？> 
  

解决方案

这是完全可能的。

感谢@ leopld的原始答案，我能够创建一个不依赖于固定高度的对象。

container position：absolute 或 position：fixed ，就可以动态填充可用空间。 p>

链接到Codepen： http：/ /codepen.io/anon/pen/Jpnyj?editors=110 。

标记

 < 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> 
  

样式

  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; 
} 
  

Wanted to know if it is possible to get the same type of design layout as pinterest or jQuery masonry using only the new flexbox layout. Here is as far as I got it:

.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;
}

and the HTML I am just using a PHP loop to create 12 items

<?php
    for ($i=0; $i<=11; $i++) {
        echo '<div class="item"></div>';
    }
?>

解决方案

It is entirely possible.

Thanks to @leopld's original answer, I was able to create one that does not depend on a fixed height.

By making the flex container position: absolute or position: fixed, you are able to get it to fill the available space dynamically.

Link to the Codepen: http://codepen.io/anon/pen/Jpnyj?editors=110. I included all the vendor prefixes you'd need at this time.

Markup

<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>

Styles

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;
}

这篇关于使用flexbox获取pinterest或jQuery砖石布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！