如何使用flexbox进行砌体布局 [英] How to make masonry layout with flexbox

问题描述

我想通过flexbox创建砌体布局.Child元素应该按照以下顺序出现，并且子元素的高度和宽度也不相同。

  1 2 
 3 4 
 5 6 
 
 code $ <$ pre 
 
解决方案 
技术上可以用 flex-flow：column-wrap ，但你需要知道容器的高度，所以项目可以正确包装，再加上你需要重新排列flex项目，因为默认的顺序是垂直的。  
 
 
 
 
  @import url（'https://fonts.googleapis.com/ css？family = Montserrat'）; html，body {margin：0; font-family：蒙特塞拉特，无衬线字体; font-size：16px;}。container {height：500px;宽度：200px;显示：flex; padding：2px; flex-direction：column; flex-wrap：wrap;}。cell {color：white;背景：＃e91e63; height：150px;宽度：100px;显示：flex; justify-content：center; align-items：center;边框：2px纯白色; 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的砌体布局，但水平排列元素

I want to create masonry layout through flexbox.Child element should appear in the following order and also the child are in diffrent height and same width. I am using lazy loading.

1 2
3 4
5 6

解决方案

Technically it's possible with flex-flow: column-wrap, but you would need to know the height of the container, so items can wrap properly, plus that you would need to reorder flex items since the default order is vertical.

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

For others ending up in this question looking for a css-only masonry solution, I recommend the following answer by Michael_B (the only and most complete at the moment):

• CSS-only masonry layout but with elements ordered horizontally

这篇关于如何使用flexbox进行砌体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！