弹性框:如何优化材料设计仪表板布局

Question

我需要构建一些可重用的模板，最好是使用优雅和简约的基于 flex 的 CSS。此模板适用于具有五个不同大小的"卡片"的仪表板。单元格 2,3,5 的宽度应相等，可能约为四分之一宽度。单元格 1,4 应该承担其余部分。 编辑：从高度上看，除单元格 1 之外的所有单元格都应彼此高度相同，即比单元格 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

Edit

要回答更新后的问题，您可以采用以下方法：

小提琴

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

原答案

小提琴

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