Flexbox：如何优化材料设计仪表板布局

Question

我需要建立一些可重复使用的模板，理想情况下是使用优雅和简约的基于Flex的CSS。此模板适用于具有五个不同大小的“卡片”的仪表板。细胞2,3,5应该是相等的宽度，大概是四分之一宽度。剩下的就是细胞1,4。 编辑：高度方面，除了cell1之外的所有单元应该是彼此相同的高度，即低于单元1的高度。因此，整体效果是一张巨型卡，三张迷你卡以及一张宽而低卡。

https://jsfiddle.net/2jjuxdhw/8/

我想对齐内容：拉伸将意味着细胞就会垂直填补空间，但是这是行不通的。另外，我是否真的需要所有被称为行和列的部分？我想知道是否有一个更好的方法来做到这一点。谢谢你的帮助。

HTML

<div id="container"> 


     <div class="column fullheight" id="column2"> 

     <section class="row row1"> 

      <div class="cell" id="cell1"><div>cell1</div></div> 

      <section class="column"> 
      <div class="cell" id="cell2"><div>cell2</div></div> 

      <div class="cell" id="cell3"><div>cell3</div></div> 
      </section> 

     </section> 
     <section class="row row2"> 

      <div class="cell" id="cell4"><div>cell4</div></div> 

      <div class="cell" id="cell5"><div>cell5</div></div> 

     </section> 


     </div> 
</div> 

CSS

div#container { 
     position: relative; 
     height: 400px; 
     display: -webkit-flex; 
     display: flex; 
     flex-flow: row wrap; 
     border: 1px solid blue; 
     align-items: stretch; 
    } 


div#column2 { 
     flex-grow:3; 
     display: flex; 
     flex-direction: column; 
     height: 100%; 
     /*flex-wrap: wrap;*/ 
     align-content: stretch; 
     justify-content: flex-start; 
     align-items: stretch; 
    } 

    div#column2 section.row { 
     display: flex; 
     flex-direction: row; 
     /*align-content: stretch;*/ 
    } 

    div#column2 section.column { 
     display: flex; 
     flex-direction: column; 

    } 

    section.column, div.cell { flex: 1 0 auto; } 


    div.cell { 
     background-color: whitesmoke; 
     padding: 0.5em; 

    } 

    div#cell1,div#cell4 { padding-left: 1em; flex: 3 0 auto; } 
    div#cell1,div#cell2 { padding-top: 1em; } 
    div#cell2,div#cell3, div#cell5 { padding-right: 1em; } 

    div.cell > div { 
     flex: 1 1 auto; 
     background-color: white; 
     height: 100%; 
     width: 100%; 
     box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; 
    } 

https://jsfiddle.net/2jjuxdhw/8/

Answer 1

编辑

要回答你的问题更新，你可以采取这样的做法：

fiddle

.container { 
 
    height: 400px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid blue; 
 
} 
 

 
.row { 
 
    display: flex; 
 
} 
 

 
.row--top { 
 
    flex: 2; 
 
} 
 

 
.row--bottom { 
 
    flex: 1; 
 
} 
 

 
.cell-wrap { 
 
    width: 25%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.cell { 
 
    flex: 1; 
 
    background-color: white; 
 
    margin: .5em; 
 
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; 
 
}

<div class="container"> 
 
    <div class="row row--top"> 
 
    <div class="cell">cell one</div> 
 
    <div class="cell-wrap"> 
 
     <div class="cell">cell two</div> 
 
     <div class="cell">cell three</div> 
 
    </div> 
 
    </div> 
 
    <div class="row row--bottom"> 
 
    <div class="cell">cell four</div> 
 
    <div class="cell-wrap"> 
 
     <div class="cell">cell five</div> 
 
    </div> 
 
    </div> 
 
</div>

原来的答复

fiddle

.container { 
 
    height: 400px; 
 
    display: flex; 
 
    border: 1px solid blue; 
 
} 
 

 
.left { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.right { 
 
    min-width: 25%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.cell { 
 
    flex: 1; 
 
    background-color: white; 
 
    margin: .5em; 
 
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    <div class="cell">cell one</div> 
 
    <div class="cell">cell four</div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="cell">cell two</div> 
 
    <div class="cell">cell three</div> 
 
    <div class="cell">cell five</div> 
 
    </div> 
 
</div>