/アンギュラ材質グリッドは

Question

だから私は

ここに私のコードは、今だ（フレキシボックスに基づく）アンギュラ材質グリッドを使用してレイアウトのこの種を取得しようとしている（幅は幅フルスクリーン、高さがちょうどレイアウトをモックアップする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

それは単なる生角度/材料コードでコメントするのは難しいのではなく実際 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>