console 命令行工具 X clear

console

<body>
	<header>头头是道</header>
	<section>
		<div class="main">主要内容区域</div>
		<div class="left">虚左以待</div>
		<div class="right">无出其右</div>
	</section>
	<footer>海底捞月</footer>
</body>

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: #333744;
    color: #fff;
}

footer {
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: #333744;
    color: #fff;
}

section {
    display: flex;
    flex-direction: row;
    /* 增长 */
    flex: 1;
}

.main {
    background-color: yellowgreen;
    text-align: center;
    flex: 1;
}

.left {
    /* 设置基准 */
    flex: 0 0 50px;
    order: -1;
    background-color: yellow;
}

.right {
    /* 设置基准 */
    flex: 0 0 50px;
    text-align: right;
    background-color: pink;
}

@media(max-width: 768px) {
    section {
        /* 增长 */
        flex: 1;
        flex-direction: column;
    }
    .main {
        flex: 1;
    }
    .left .right {
        /* 设置基准 */
        flex: 0 0 50px;
    }
}