9

想知道是否可以仅使用新的 flexbox 布局获得与 pinterest 或 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>';
    }
?>
4

4 回答 4

8

这是完全可能的。

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

通过制作 flex 容器position: absoluteor position: fixed，您可以让它动态地填充可用空间。

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;
}
于 2014-04-10T16:43:52.083 回答
6

CSS3 的列将使您非常接近该布局。（请注意，在非最新浏览器中的支持可能很差，并且规范将来可能会更改。）另一个示例不适用于 FF，但这个示例可以：

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 { 边距：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;
}

或者玩完整的例子。

于 2013-08-02T20:11:08.537 回答
3

实际上，使用 flexbox 可以毫不费力地做到这一点。唯一的缺点是您必须为包装器指定一个绝对高度，以使其内容实际包装。否则，它将全部排列在一个伟大的、永无止境的专栏中。

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

（无前缀的）CSS：

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

我也做了一个 JS Fiddle，所以你可以直接看到结果。

然而，简而言之，诀窍是flex-direction: column结合使用flex-wrap: wrap和固定高度的包装器。

不过，我必须补充一点——这似乎只是编写 CSS 列规范的场景，因此 KatieK 的解决方案可能是更好的方法。最重要的是，当使用 CSS 列而不是 flexbox 时，不需要为包装器指定固定高度。

于 2013-11-04T18:14:55.657 回答
3

更新：据我所知，Flexbox 无法做到这一点。Flexbox 更关心水平布局，而不是垂直。我很高兴被证明是错误的，但这是我从有限的经验中收集到的。如果您想了解更多信息，我在这件事上找到的最好的文章是：http ://css-tricks.com/snippets/css/a-guide-to-flexbox/ （是的，当然是 Chris Coyier . 你怎么猜到的？）

在任何情况下，即使您可以使用 Flexbox 来做到这一点，这也有点像 hack，因为这不是 Flexbox 的用途。有一种更简洁的方法来处理CSS3列。这是一个例子。

浏览器支持不是最好的：http: //caniuse.com/#search=column%20layout即使这个例子似乎也不支持 Firefox，虽然我不知道为什么，因为 FF 确实支持相应的属性，根据 CanIUse。

因此，总结和 TLDR：这是一个令人钦佩的想法，在纯 CSS 中执行此操作，但目前对于大多数实际目的来说是不可能的。您可能会更好地使用JQuery Masonry

于 2013-01-10T19:52:37.147 回答