flexbox 垂直分割容器为 HALF

Question

谁能告诉我如何使 右上 容器和 右下 容器具有相同的高度并将红色容器垂直拆分 50-50%。不管里面的内容是什么。我尝试拉伸内容并将它们包裹起来，同时保持flex-direction: row 以保持物品的相同高度，但我迷路了。

我的期望：right top 容器与 right bottom 的高度相同，这当然也会导致 left 容器自动增长。

这是我目前所拥有的：http://jsbin.com/rozoxoneki/edit?html,css,output

.flex{
  display: flex;
  border: 5px solid red;
  &-child{
    background: green;
    border: 2px solid yellow;
    flex: 1;
  }
}

.flex--vertical{
  flex-direction: row;
  flex-wrap: wrap;

  > .flex-child{
    min-width: 100%;
  }
}


<div class="flex">
  <div class="flex-child">
    left
  </div>
  <div class="flex-child flex flex--vertical">
    <div class="flex-child">
      <h1>right top</h1>
    </div>
    <div class="flex-child">
      <h1>right bottom</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate eum ex mollitia temporibus unde eveniet omnis, vel, corrupti sed nobis consequatur quaerat ad sequi aliquid nostrum?</p>
    </div>
  </div>
</div>

Answer 1

公认的答案对于使用 flex 属性并不理想，因为这一切都可以在不需要min-height 或max-height 的情况下完成

我已经清理了 example fiddle 并删除了非必要的 css 样式，以显示此处使用了哪些 flex 属性。

为了获得均匀分布的顶部/底部 div，您需要为 flex-basis 指定正确的值，或者让 flex 自行解决。假设父级的显示设置为具有列方向的 flex，组合的flex 样式可以轻松实现：

.half-containers {
    flex: 1;
}

详细了解 flex styling 和 flex-basis 属性

Answer 2

直觉上人们会认为这仅适用于主容器的 flex-direction: column 并将左侧容器的高度设置为 100%。

所有浏览器都这样做：（这是另一个stackoverflow question的引用）

怎么可能所有主流浏览器都拥有 flex 容器 在行方向上展开换行，但不在列方向上展开？

所以你可以做的就是将两个正确的容器包装成一个新的容器：

像这样的 HTML - 架构：

<div class="main-container">
    <div class="left-container">Left container</div>
    <div class="right-container">
        <div class="half-containers">Top right</div>
        <div class="half-containers">Bottom right</div>
    </div>
</div>

这里以jsfiddle 为例，您可以如何为它设置样式以获得预期结果。

在本例中，“主容器”设置为主体的 50% 宽度和 75% 高度。

Answer 3

基于 Felipe 的回答，这里有一个更简单的示例，说明如何将单个 flex 容器垂直分成两半。除了底部标记为optional 的两种样式外，这些样式中的每一种都已被确认为重要且必要的。

（让我明白的是，每个父元素都需要设置一个height: 100%，否则整个事情都会中断。）

HTML

<div id="container">
  <div class="row">This is the top.</div>
  <div class="row">This is the bottom.</div>
</div>

CSS

html, body {
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.row {
  flex: 1;
}

/* optional: get rid of body margin. makes look nice. */
body {
  margin: 0;
}

/* optional: shade the bottom row */
.row:nth-child(2) {
  background: #bbb
}

在这里使用 CodePen：

https://codepen.io/rbrtmrtn/pen/NyxeJE