css, css3, flex實現聖盃佈局

<style>
    .wrapper {
        width: 500px;
        height: 540px;
        margin: 50px auto;
        border: 1px solid #dedede;
        resize: both;
        overflow: hidden;

    }

    .wrapper .title {
        line-height: 40px;
        text-align: center;
        font-size: 20px;
        height: 40px;
        box-sizing: border-box;
        border-bottom: 1px solid #dddd;
    }

    .wrapper .content {
        display: flex;
        height: calc(100% - 40px);
        width: 100%;
        flex-direction: column;
    }

    .wrapper .content .header,
    .wrapper .content .footer,
    .wrapper .content .left,
    .wrapper .content .right {
        flex: 0 0 70px;
        border: 1px solid #0ff;
        box-sizing: border-box;
    }

    .wrapper .content .center {
        flex: 1 1 auto;
    }

    .wrapper .content .center{
        display: flex;
    }
    .wrapper .content .center .center-content{
        flex: 1 1 auto;
    }
</style>
<div class="wrapper">
    <div class="title">flex聖盃佈局</div>
    <div class="content">
        <div class="header">header</div>
        <div class="center">
            <div class="left">left</div>
            <div class="center-content">center</div>
            <div class="right">right</div>
        </div>
        <div class="footer">footer</div>
    </div>
</div>