php – 使用flexbox获取pinterest或jQuery砖石布局

发布时间:2022-04-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了php – 使用flexbox获取pinterest或jQuery砖石布局脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
知道是否可以获得与pinterest或jquery砖石相同类型的设计布局,只使用新的flexBox布局.这就是我所得到的:
.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的原始答案,我能够创建一个不依赖于一个固定高度的.

通过使flex容器的位置:absolute或position:fixed,可以让它动态地填充可用空间.

@L_126_6@到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;
}

脚本宝典总结

以上是脚本宝典为你收集整理的php – 使用flexbox获取pinterest或jQuery砖石布局全部内容,希望文章能够帮你解决php – 使用flexbox获取pinterest或jQuery砖石布局所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。