使用flex制作2乘2格

Question

我正在尝试使用flexbox制作2比2的自定义网格，但我目前无法使其正常工作。

这是我想要做的。

Hight of 1 and 2 is smaller than that of 3 and 4. 
And width of 1 and 3 is wider than 2 and 4.

我试着跟随小提琴这样做，但是我打算不这样做。任何帮助表示赞赏。 https://jsfiddle.net/jewcvLs5/1/

Answer 1

如果没有额外的“行”包装器，Flexbox无法本机执行此操作。

* {
  box-sizing: border-box;
}
.parent {
  width: 80%;
  background: #c0ffee;
  border: 1px solid grey;
  display: flex;
  flex-wrap: wrap;
  margin: 1em auto;
}
.row {
  flex: 0 0 100%;
  display: flex;
}
.child {
  border: 1px solid green;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  order: 1;
}
.child:first-child {
  background: pink;
  flex: 1 0 66.6666%;
}
.child:nth-child(2) {
  background: red;
  flex: 1 0 33.333%;
}
.first .child:first-child {
  height: 75px;
}
.second .child:first-child {
  height: 150px;
}
@media (max-width: 600px) {
  .row {
    display: contents;
  }
  .parent {
    flex-direction: column;
  }
  .child:nth-child(2) {
    order: 2;
  }
}

<div class="parent">
  <div class="row first">
    <div class="child">1</div>
    <div class="child">2</div>
  </div>
  <div class="row second">
    <div class="child">3</div>
    <div class="child">4</div>
  </div>
</div>

然而，如果在某些断点处我们希望重新排序在包裹行之间，那么这会产生问题。

有一个新的CSS display属性contents [MDN LInk]，它允许我们“解包”这些元素，就像它们的包装不在那里一样。

不幸的是，FF（37+）在撰写之日支持它，但我在这里留下这个例子（和Codepen）以供将来参考。

Answer 2

#wrapper {
  display: flex;
  flex-flow: row wrap;
}
#wrapper .one,
#wrapper .three {
  flex: 100 0 34%;
}
#wrapper .two,
#wrapper .four {
  flex: 1 0 34%;
}
.one::before {
  content: "";
  float: left;
  padding-top: 10%;
}
.three::before {
  content: "";
  float: left;
  padding-top: 30%;
}

/*properties below are just for cosmetics*/
.one {
  background: violet;
}
.two {
  background: orange;
}
.three {
  background: limegreen;
}
.four {
  background: dodgerblue;
}
#wrapper {
  border: 2px solid gray;
}
.one::before {
  border: 2px solid maroon;
}
.three::before {
  border: 2px solid navy;
}

<div id='wrapper'>
  <div class='one'></div>
  <div class='two'></div>
  <div class='three'></div>
  <div class='four'></div>
</div>

我们希望flexboxes包装成两行，因此我们在包装器上使用flex和row wrap。

因为flex-basis为34％，所以只有两个项目适合一行。第一个和第三个div具有更大的flex-grow因子，因此它们将占据几乎所有剩余空间。这导致第一个“列”大约是第二个“列”的两倍。

要强制行的高度，我们在第一个和第三个div上使用pseudo-element。垂直边距和填充基于父级的 width 。因为第一个和第三个div具有相同的宽度，所以通过将相关的伪元素设置为三倍，我们可以使第二个“行”增加三倍。