在左边制作一个完整的容器，在右边制作一半和一半的容器

Question

与上面的示例相同，但在每个容器中都有文本在中间并且也做出响应。任何人都可以帮忙吗？

flexbox vertically split container in HALF

Answer 1

这里可以给你一个开始的东西：

.container {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 15em;
}

.row {
  width: 50%;
}

.left {
  background: red;
}

.right {
  background: yellow;
}

.right div {
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right div:nth-of-type(1) {
  background: blue;
}

<div class="container">
  <div class="row left">
    
  </div>
  <div class="row right">
    <div>
      Top
    </div>
    <div>
      Bottom
    </div>
  </div>
</div>

Codepen：https://codepen.io/anon/pen/Wdbrrz