带有 css3 flex 的砌体布局 [英] Masonry layout with css3 flex

问题描述

我正在尝试使用 display: flex;

运行良好，直到我的商品尺寸不同:

It's running good until my items has different sizes:

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

我希望 小 物品低于 大 物品以包裹(大物品下方的行"中的 2 个物品应该很适合但只有 1 个去那里)

I want small items below big items to wrap it around (2 items in a 'row' below big item should easly fit but only 1 goes there)

css flex 可以这样做吗?

Is it possible with css flex to do so?

推荐答案

我知道你不想使用转换，但是这完全按照描述的方式工作，并且实际上比 flexbox 有更好的浏览器支持(尽管就常规而言更新浏览器这不是一个比平常更引人注目的论点).

I know you don't want to use transforms, but this works exactly as described and actually has better browser support than flexbox does (although as far as the regularly updating browsers that's a less compelling argument than normal).

无论如何:

我们在这里做什么:

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

设置方向 – 我们通过将容器的左侧移动到顶部，顺时针旋转四分之一圈，将其从上到下扭曲.

Setting the direction – We're twisting it to go up to down by moving the left side of the container to the top, a one-quarter turn clockwise.

翻转整个she-bang – 我们在Y轴上翻转容器，以便方向正确(在这种情况下明显为ltr)

Flipping the whole she-bang – We're flipping the container on the Y-axis, so that the orientation is correct (apparent as ltr in this case)

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

修复浮动清除的东西 – 很好的资源 这里

Fixing the float clearing stuff – Good resource on that here

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

恢复单个项目的翻转和扭曲 – 我们希望这些能够正确显示，因此我们使用 transform 规则将它们解开以引导 .flex-i 规则.

Reverting the flipping and twisting for individual items – We want these to display correctly, so we untwist them with the transform rule to head the .flex-i rule.

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

So let's take a look at what's going on with the final result:

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

一些缺点:

1. 您的顶点将翻转以在此容器上进行布局.如果您不介意额外的标记，您可以将其保存在第三个容器中进行包装，从而在一定程度上缓解这种情况(我个人是这样做的，但每个人都有).
2. 这在旧浏览器上会失败得很惨——但你的 flexbox 解决方案也是如此，所以有点洗.

希望这有帮助！

所以评论提出了一个相当明显的问题如果我们想要这个布局中的多个大元素怎么办?"

So the comments raised the rather obvious question "What if we want more than one big element in this layout?"

完全合理，并且所提出的解决方案将留下一些相当丑陋的差距，当然.不幸的是，如果你需要一个纯粹的内容填充，你需要更有创意并使用 JavaScript 布局系统(嘘，慢，讨厌，难以维护)或做一些其他砖石布局有的东西之前必须做的:tuckpointing

Perfectly reasonable, and the solution as presented is going to leave some rather ugly gaps, granted. Unfortunately, if you need a pure content fill for those, you'll need to get much more creative and use either a JavaScript layout system (boo, slow, nasty, hard-to-maintain) or do something that several other masonry layouts have had to do before: tuckpointing

我们将用虚拟物品填充我们的空白区域.这些可以是预先选择的图像、图块，以及任何可以在不分散内容的情况下为实际内容增添一抹亮色的东西.

We're going to shim our empty spaces with dummy items. These can be pre-selected images, tiles, anything that's going to add a splash of flair in place of actual content without distracting from the content.

我们的做法如下:

小提琴

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

Update the .flex-c container to hide its overflow

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

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

What this does in terms of the fiddle is creates a little pink box that pops out of the right side of each one of those content items. If there's a box there already, it gets covered up. If it's missing, we show the dummy box. Super simple.

这篇关于带有 css3 flex 的砌体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！