SOURCE

<!-- 案例一 -->
<section>
	<div>固定宽高 100 * 150</div>
	<div>独占剩余空间</div>
	<div>固定宽高 100 * 150</div>
</section>

<!-- 案例二 -->
<p>
	<span>占一份</span>
	<span>独占两份</span>
	<span>占一份</span>
</p>

/* 案例一 */
section {
    display: flex;
    width: 660px;
    height: 150px;
    margin: 0 auto;
    text-align: center;
    background-color: palegoldenrod;
}
section div:nth-child(1) {
    width: 150px;
    height: 150px;
    background-color: seagreen;
}
section div:nth-child(2) {
    flex: 1;
    background-color: salmon;
}
section div:nth-child(3) {
    width: 150px;
    height: 150px;
    background-color: cornflowerblue;
}

/* 案例二 */
p {
    display: flex;
    width: 660px;
    height: 150px;
    margin: 100px auto;
    text-align: center;
    background-color: palegoldenrod;
}
p span {
    flex: 1;
}
p span:nth-child(2) {
    flex: 2;
    background-color: hotpink;
}