Question

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

我设法做到这一点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;
}

另外，您可能会注意到我已将flex和.big上的.medium设置为5，因为我想要大框的总宽度和总宽度为2中等的盒子是平等的，但它没有工作。

有更好的方法吗？

Answer 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元素上的一个显式高度，但其余项目应相应调整 - 缺点是溢出处理变得困难。

顺便提一下，这是＆＃34; 2D＆＃34;网格布局旨在帮助的情况（与flexbox的1D相比），但在此之前还需要一段时间。

CSS flexbox - 有更好的方法吗？

1 个答案: