困惑Flexbox的/角材料电网

2016-03-26 34 views 1 likes

所以我试图让这种采用了棱角分明材料网格布局（基于Flexbox的）困惑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>

所有我得到它做的是 -

来源

2016-03-26 Ben Che

什么是输出CSS？ –

.layout-column> .flex-30，.layout-column> .flex-30 {-webkit-flex：1130％; -ms-flex：1 1 30％; flex：1 1 30％; max-width：100％; 最大高度：30％; box-sizing：border-box; } –

回答

很难只用原始角/物料代码进行评论，而不是实际 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>

来源

2016-03-26 19:06:24

困惑Flexbox的/角材料电网

回答

相关问题