使用flexbox获取pinterest或jQuery砖石布局 [英] using flexbox to get pinterest or jQuery masonry layout
问题描述
想知道是否可以获得与pinterest相同类型的设计布局,或者只使用新的flexbox布局的jQuery masonry。这里是我得到的:
.flex-container {
display:-webkit-flex;
display:
-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;
显示:-ms-flexbox;
display:
-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屋!