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>