html - CSS flexbox - 有更好的方法吗？

Question

我要找的结果是左边一个大方 block ，然后右边四个小方 block ，一切对齐。

我设法做到了 in this fiddle但我的解决方案有几个问题:
- 就代码而言不是很干净
- 它没有反应

HTML:

<div class="wrapper">
  <div class="box big">ONE</div>
  <div class="med-wrapper">
    <div class="row-1">
      <div class="box medium">TWO</div>
      <div class="box medium">THREE</div>
    </div>
    <div class="row-2">
      <div class="box medium">FOUR</div>
      <div class="box medium">FIVE</div>
    </div>
  </div>
</div>

CSS:

.wrapper {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: space-around;
  height: 200px;
}
  /* @media screen and (max-width: 768px) {
    flex-direction: column
  } */

.box {
  background: #09f;
  color: white;
  padding: 1em;
  margin: 5px;
  text-align: center;
}

.big {
  flex: 5;
}

.medium {
  flex: 5;
  height: 100px;
}

.med-wrapper {
  display: flex;
}

此外，您可能会注意到，我已将 .big 和 .medium 上的 flex 设置为 5，因为我希望总大盒子的宽度和两个中盒子的总宽度相等，但是没有用。

有更好的方法吗？

Answer 1

让所有内容对齐而不受到很多约束是很棘手的，但是在右侧部分的列方向上使用 flexbox 包装可能会奏效。

这是一个快速版本，它在右侧部分 (.med-wrapper) 使用了 flex-flow: column wrap 并去掉了两个部分的 wrapper 元素它里面的列包装器 -

<div class="wrapper">

  <div class="box big">
    ONE
  </div>

  <div class="med-wrapper">
    <div class="box medium">TWO</div>
    <div class="box medium">THREE</div>
    <div class="box medium">FOUR</div>
    <div class="box medium">FIVE</div>
  </div><!-- /.med-wrapper -->

</div><!-- /.wrapper -->

...然后是 CSS:

body {
  font-family: 'calibri', sans-serif;
  margin: 0;
}

.wrapper {
  display: flex;
  justify-content: space-around;
  height: 200px;
}


.box {
  background: #09f;
  color: white;
  padding: 1em;
  margin: 0 5px;
  text-align: center;
  box-sizing: border-box;
}

.big {
  flex: 1;
  height: 100%;
}
.med-wrapper {
  flex: 1;
  display: flex;
  height: 100%;
  flex-flow: column wrap;
  justify-content: space-between;
  overflow: auto;
}

.medium {
  /* exact sizing for the medium boxes (i.e. get it from main sizing.) */
  flex: 0 0 auto;
  /* adjust for margins: */
  width: calc(50% - 10px);
  height: calc(50% - 5px);
}



/* some theoretical adjustments for smaller screens */
@media screen and (max-width: 768px) {
  /* switch the wrapper to column dir, and remove fixed height. */
  .wrapper {
    flex-direction: column;
    height: auto;
  }
  /* just a min height for demo purposes. */
  .big {
    min-height: 200px;
  }
  /* Now we need to re-set a height on this one, if we
  want to keep the 2x2 square thing. */
  .med-wrapper {
    margin-top: 10px;
    height: 200px;
  }
 }

现场演示 http://jsbin.com/kasez/5/edit

我已经使用 calc() 进行大小计算以抵消边距，但是嘿，如果您已经依赖于 flexbox，您可能无论如何都需要后备。 :-)

它应该只与 .wrapper 元素上的一个显式高度一起工作，但其余元素应该相应地调整 - 缺点是溢出处理变得困难。

顺便说一下，这是网格布局旨在帮助解决的“2D”情况类型(与 flexbox 的 1D 相比)，但要成为一个可行的选择还需要一段时间。