html - 使用 css3 flex 的砌体布局

Question

我正在尝试使用 display: flex;

对元素进行某种砖石布局

在我的元素有不同尺寸之前，它运行良好:

这里是例子:http://jsfiddle.net/2pL3j07x/1/

我希望小元素低于大元素环绕(大元素下方的“行”中的 2 件元素应该很容易容纳但只有 1 个去那里)

css flex 是否可以这样做？

Answer 1

我知道您不想使用转换，但这完全按照描述的方式工作，并且实际上比 flexbox 具有更好的浏览器支持(尽管就定期更新的浏览器而言，这是一个不如正常的有说服力的论点)。

无论:

Here's the fiddle

我们在这里做什么:

.flex-c {
    transform: rotate(90deg) scaleY(-1);
    transform-origin: left top;
}

设置方向 –我们通过将容器的左侧移动到顶部(顺时针四分之一圈)来扭转方向，使其向上向下移动。

翻转整个 she-bang – 我们在 Y 轴上翻转容器，以便方向正确(在本例中显示为 ltr)

.flex-c:after {
    content: '';
    display: table;
    clear: both;
}

修复 float 清除问题 – 很好的资源 here

.flex-i {
    transform: rotate(90deg) scaleY(-1);
    height: 100px;
    width: 100px;
    background-color: gray;
    margin: 0 10px 10px 0;
    float: left;
}

恢复单个元素的翻转和扭曲——我们希望这些元素正确显示，因此我们使用 transform 规则将它们解开，以在 .flex-我规则。

那么让我们看看最终结果是怎么回事:

1. 大元素在左上角。
2. 元素显示在列中。
3. 列从上到下填充。
4. 增长是无限扩展的。

一些缺点:

1. 您的顶点被翻转以便在此容器上进行布局。如果您不介意额外的标记(我个人很介意，但每个人都介意)，您可以通过将其保存在第三个容器中进行包装来缓解这种情况。
2. 这将在旧版浏览器上惨遭失败——但您的 flexbox 解决方案也是如此，有点浪费。

希望这对您有所帮助!

编辑:

因此评论提出了一个相当明显的问题“如果我们想要在这个布局中使用多个大元素怎么办？”

非常合理，所提供的解决方案将留下一些相当丑陋的差距，理所当然。不幸的是，如果你需要纯内容填充这些内容，你需要更有创意并使用 JavaScript 布局系统(糟糕、缓慢、讨厌、难以维护)或做一些其他砖石布局具有的东西之前必须做的事:tuckpointing

我们将用虚拟元素填充我们的空白空间。这些可以是预先选择的图像、图 block ，以及任何可以在不分散注意力的情况下在实际内容的位置上添加一些亮点的东西。

这是我们的做法:

Fiddle

更新 .flex-c 容器以隐藏其溢出

.flex-c {
    transform: rotate(90deg) scaleY(-1);
    transform-origin: left top;
    overflow: hidden;
}

添加一个易于伪装的 shim 伪元素

.flex-i:not(.big):after {
    content: '';
    height: 100px;
    width: 100px;
    left: 110px;
    top: 0;
    position: absolute;
    background-color: pink;
}

替代方法:您可以采用不太喜欢 CSS3 但支持更好的方式来实现此目的

.flex-i:after {
    content: '';
    height: 100px;
    width: 100px;
    left: 110px;
    top: 0;
    position: absolute;
    background-color: pink;
}
.flex-i.big:after {
    display: none;
}

这在 fiddle 方面的作用是创建一个粉红色的小框，该框从每个内容项的右侧弹出。如果那里已经有一个盒子，它就会被掩盖。如果它丢失了，我们会显示虚拟框。 super 简单。