CSS flexbox - 有没有更好的方法来做到这一点？答案

【问题标题】：CSS flexbox - is there a better way to do this?CSS flexbox - 有没有更好的方法来做到这一点？
【发布时间】：2014-08-31 23:27:08
【问题描述】：

我要找的结果是左边一大块，右边四个小块，一切都对齐了。

我设法做到了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，因为我希望大盒子的总宽度和两个中盒子的总宽度相等，但它没有用。

有没有更好的方法来做到这一点？

【问题讨论】：

有什么理由不使用像Bootstrap 3 这样的内置这些框架？
感谢您不使用 Bootstrap。
用 Bootstrap 做到这一点是a lot more complicated，至少在我看来。另外，我不是很喜欢 Bootstrap，感觉对它没有太多的控制权。
无论如何，like this？假设您希望行成为行。但是，包装不太好用。你必须设置一些最小值。
总是可以用更少的标记来完成。例如，我想到的是一个完全扁平的结构，每个id 都有绝对定位。不过，这可能不适合您的情况，因此请选择代表您的内容的标记，然后添加最少数量的包装器以使其正常工作。在这种精确布局的情况下，在不了解/限制内容的情况下，这很可能是最低限度的。

标签： html css flexbox

【解决方案1】：

在没有太多约束的情况下让所有内容对齐是很棘手的，但是在右侧部分的列方向上使用 flexbox 换行可能会起作用。

这是一个快速版本，它在右侧部分使用 flex-flow: column wrap (.med-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 元素上的一个显式高度，但其余项目应相应调整 - 缺点是溢出处理变得困难。

顺便说一句，这是 Grid Layout 旨在帮助解决的“2D”情况（相对于 flexbox 的 1D），但要成为一个可行的选择还需要一段时间。

【讨论】：