使用CSS创建砌体布局？

Question

我想仅使用CSS而不是jquery或javascript来创建此布局。是否有可能，如果是，请指导我找到正确的来源。谢谢你:)

我尝试过这个但是效果并不好： http://codepen.io/anon/pen/GJZWoX

HTML：

<div class="parent">

  <div class="red">
  </div>

  <div class="blue">
  </div>

  <div class="red">
  </div>

   <div class="red">
  </div>

</div>

CSS：

.parent{
  width:330px;
}

.red{
  float:left;
  width:150px;
  height:150px;
  margin-bottom:10px;
  margin-left:10px;
  background-color:red;
}

.blue{
  float:left;
  width:150px;
  height:300px;
  margin-bottom:10px;
  margin-left:10px;
  background-color:blue;
}

Answer 1

Flexbox允许您这样做，因为它无法分发内容和差距。

Flexbox的使用并不容易，但不是不可能的。这是一些帮助： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent{
  background: green;
  width:330px;
  height: 330px;
  display: flex;
  flex-flow: column wrap;
}

.red, .blue{
  margin: 10px;
}
.red{
  flex: 1 1 100px;;
  background-color:red;
}

.blue{
  flex: 2 2 150px;
  background-color:blue;
}

这是给你的笔：http://codepen.io/vandervals/pen/OVNvaE?editors=110

所以，这里发生的事情的解释如下：

1. 父母必须有display: flex。

2. 你必须告诉流向，在这种情况下你需要列。

3. 对于项目，您必须定义flex属性。在这种情况下，你希望红色更小，然后比例为1，如果可以，趋势将是100px。蓝色有一个双重“重量”，趋势是150px。