I am looking to create reusable templates that feature a clean and minimalist flex-based CSS design. The template I am working on is for a dashboard containing five "cards" of varying sizes. Cells 2, 3, and 5 should be of equal width, approximately a quarter of the total width. Cells 1 and 4 should take up the remaining space. Edit: In terms of height, all cells except for cell 1 should have the same height, shorter than cell 1. This setup creates the effect of one large card, three small cards, and one wide but short card.
https://jsfiddle.net/2jjuxdhw/8/
I have tried using align-content: stretch to make the cells fill the vertical space, but it is not working as expected. I am also wondering if styling all sections as rows and columns is necessary or if there is a more efficient way to achieve the layout. Thank you for any assistance.
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;
}