/Eğik Malzeme Izgara

Question

yüzden

İşte benim kod artık var (flexbox'a dayanarak) Açısal Malzeme grid kullanımının düzeni bu tür almaya çalışıyorum (genişlik genişlik - tam ekran ve yüksekliği 700 sadece

<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> 

bunu yapmak alıyorum tek şey bu) düzenini mockup için

Answer 1

Sadece çiğ Eğik/Malzeme kodu ile yorum yapmak zor ziyade fiili HTML/CSS ... ama böyle bir şey olmalı:

* { 
 
    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>