使用 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。