使用 flexbox 获取 pinterest 或 jQuery 砌体布局

问题描述

想知道仅使用新的 flexbox 布局是否可以获得与 pinterest 或 jQuery masonry 相同类型的设计布局.据我所知:

.flex-container {显示:-webkit-flex；显示:弹性；-webkit-flex-flow:行换行；flex-flow:行包装；}.物品 {宽度:220px；高度:250px；边距:10px 自动；填充:0；背景:#ccc;}.item:nth-child(3n+2) {背景:#aaa;高度:400px；}

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

完全有可能.

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

通过将 flex 容器设置为 position: absolute 或 position: fixed，您可以让它动态填充可用空间.

代码笔链接:http://codepen.io/anon/pen/Jpnyj?editors=110.我包括了您此时需要的所有供应商前缀.

标记

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

样式

body {背景:黑色；}.包装{位置:绝对；宽度:100%；高度:100%；显示:-webkit-box；显示:-webkit-flex；显示:-ms-flexbox；显示:弹性；-webkit-flex-flow:列换行；-ms-flex-flow:列换行；flex-flow:列包装；-webkit-box-align:拉伸；-webkit-align-items:拉伸；-ms-flex-align:拉伸；对齐项目:拉伸；-webkit-align-content:拉伸；-ms-flex-line-pack:拉伸；对齐内容:拉伸；}.盒子 {边距:5px；-webkit-box-flex: 0;-webkit-flex:0 1 自动；-ms-flex:0 1 自动；弹性:0 1 自动；}.box-红色{高度:100px；背景:红色；}.box-blue {高度:120px；背景:蓝色；}.box-粉红色{高度:144px；背景:粉红色；}.box-紫色{高度:250px；背景:紫色；}.box-green {高度:200px；背景:绿色；}.box-黄色{高度:20px；背景:黄色；}.box-brown {高度:290px；背景:棕色；}

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 砌体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！