对 flexbox/Angular Material 网格感到困惑

Question

所以我正在尝试使用 Angular Material 网格（基于 flexbox）

来获得这种布局

现在是我的代码（宽度是父全屏的宽度，高度是 700 只是为了模拟布局）

<div class="mid-section">
 <div layout="row" style="width:100%; height:700px;">
  <!-- Left-hand side -->
  <div layout="column" flex="70">
    <md-card flex="70">
      Box 1
    </md-card>
    <md-card flex="30">
      Box 2
    </md-card>
  </div>
  <div layout="column" flex="30">
    <md-card flex="30">
      Box 3
    </md-card>
    <md-card flex="70">
      Box 4
    </md-card>
  </div>
</div>

我要做的就是这个 -

Answer 1

仅使用原始 Angular / Material 代码而不是 actual HTML/CSS 很难评论...但它应该是这样的：

* {
  box-sizing: border-box;
}
.row {
  display: flex;
  height: 300px;
}
.column div {
  background: lightblue;
  border: 1px solid grey;
  margin: 5px;
}
.column {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.flex70 {
  flex: 7;
}
.flex30 {
  flex: 3
}

<div class="mid-section">
  <div class="row">
    <div class="column flex70">
      <div class="flex70">Box 1
      </div>
      <div class="flex30">Box 2
      </div>
    </div>
    <div class="column flex30">
      <div class="flex30">
        Box 3
      </div>
      <div class="flex70">
        Box 4
      </div>
    </div>
  </div>
</div>

对 flexbox/Angular Material 网格感到困惑

Confused about flexbox/Angular Material Grid

css

flexbox

angular-material