【问题标题】:Flexbox stack different height childs [duplicate]Flexbox堆叠不同高度的孩子[重复]
【发布时间】:2016-02-04 09:41:48
【问题描述】:

我正在构建一个图片组合网站,我需要根据图片的可变大小来堆叠图片。到目前为止,这是我使用 flexbox 所取得的成果:

这就是我想要得到的地方!!

有人知道如何让孩子在 flexbox 显示器上以这种方式堆叠吗?我发誓我在 flexbox 教程的任何地方都找不到这种特殊的结构,尽管我已经在 tumblr 博客上看到过好几次了。

这是我的代码: http://jsfiddle.net/822h7ztd

.flexman {
    width:100%;
    padding: .2vw;
    flex-flow: row wrap;
    display: flex;
}
.flexman div {
    background: red;
    width: 100px;
    height:50px;
    margin: .2vw; 
}

【问题讨论】:

  • @alirezasafian,当我第一次开始在这个网站上时,我也手动输入了“可能重复...”但它实际上是一个自动发布,当你第一个投票关闭重复的问题。下次点击“关闭”。
  • @Michael_B 注意,tnx。
  • 你去 - codepen.io/balazs_sziklai/pen/mOwoLg 似乎正是你想要的。

标签: html css flexbox


【解决方案1】:

对于任何可能遇到过这种情况的人来说,您正在寻找的似乎称为砌体布局,可以通过这种方式使用 flexbox 实现:

http://thenewcode.com/844/Easy-Masonry-Layout-With-Flexbox

【讨论】:

  • 这个解决方案实际上并没有维护1 - 2 - 3 - 4问题中要求的顺序。