如何使用flexbox进行砌体布局

我想通过flexbox.Child元素创建砌体布局，并且该子元素应该按照以下顺序出现，并且子元素的高度和宽度也不相同。我正在使用延迟加载。如何使用flexbox进行砌体布局

1 2 
3 4 
5 6

来源

2017-01-09 sasoft

Make html and css snippet。 – Rahul

如果3比4高，或者如果1高于2，那么4就不会显示在2的下方。 – FelipeAls

在搜索“砌体布局css网页设计”后（因为我从未听过我之前发现了一些事情：砌体布局是我昨天称之为“Pinterest布局”的东西。谢谢你教我一个新的术语。以前关于flexbox砌体布局的问题* https://stackoverflow.com/q/28681572/7382273 * https://stackoverflow.com/q/20977390/7382273 – mat

从技术上讲这是可能的flex-flow: column-wrap，但你需要知道的容器的高度，这样的项目可以适当包装，加上你需要重新排列柔性项目，因为默认顺序是垂直的。

@import url('https://fonts.googleapis.com/css?family=Montserrat'); 
 
html, 
 
body { 
 
    margin: 0; 
 
    font-family: "Montserrat", sans-serif; 
 
    font-size: 16px; 
 
} 
 

 
.container { 
 
    height: 500px; 
 
    width: 200px; 
 
    display: flex; 
 
    padding: 2px; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
} 
 

 
.cell { 
 
    color: white; 
 
    background: #e91e63; 
 
    height: 150px; 
 
    width: 100px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border: 2px solid white; 
 
    border-radius: 5px; 
 
} 
 

 
.c2 { 
 
    order: 4; 
 
    height: 100px; 
 
} 
 

 
.c3 { 
 
    order: 2; 
 
    height: 100px; 
 
} 
 

 
.c4 { 
 
    order: 5; 
 
    height: 200px; 
 
} 
 

 
.c5 { 
 
    order: 3; 
 
} 
 

 
.c6 { 
 
    order: 6; 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="cell c1">1</div> 
 
    <div class="cell c2">2</div> 
 
    <div class="cell c3">3</div> 
 
    <div class="cell c4">4</div> 
 
    <div class="cell c5">5</div> 
 
    <div class="cell c6">6</div> 
 
</div>

对于这个问题，结束了他人寻找一个只有CSS-砌筑的解决方案，我建议由Michael_B（唯一的，目前最完整的）如下回答：

CSS-only masonry layout but with elements ordered horizontally

来源

2017-08-26 19:18:42

如何使用flexbox进行砌体布局

回答

相关问题