对 flexbox/Angular Material Grid 感到困惑答案

【问题标题】：Confused about flexbox/Angular Material Grid对 flexbox/Angular Material Grid 感到困惑
【发布时间】：2016-07-14 07:43:16
【问题描述】：

所以我正在尝试使用 Angular Material Grid（基于 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>

我要做的就是——

【问题讨论】：

输出 CSS 是什么？
.layout-column > .flex-30, .layout-column > .flex-30 { -webkit-flex: 1 1 30%; -ms-flex：1 1 30%；弹性：1 1 30%；最大宽度：100%；最大高度：30%； box-sizing：边框框； }

标签： css flexbox angular-material

【解决方案1】：

很难用原始的 Angular / Material 代码而不是实际 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>

【讨论】：