CSS3中FLEX快速實現BorderLayout布局的方法

<div class="parent">
 <header>北</header>
 <aside class="left">東</aside>
 <div class="center">中</div>
 <aside class="righ">西</aside>
 <footer>南</footer>
</div>

.parent{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 text-align: center;
}

header, footer{
 flex-basis: 100%;
}.center{
 flex-grow: 3;
}aside{
 flex-grow:1;
}

.parent{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 text-align: center;
}header,footer,aside,.center{
 padding: 10px;;
}.center,aside{
 min-height: 300px;
}header, footer{
 flex-basis: 100%;
 min-height: 80px;
}header{
 background-color: cadetblue;
}footer{
 background-color: darkgrey;
}.center{
 flex-grow: 3;
}aside{
 flex-grow:1;
 background-color: bisque;
}