css雙飛 翼佈局

引言

曾經在江湖上盛傳的雙飛翼佈局，無人不知，無人不曉。大概的意思就是左右兩邊盒子固定寬度，剩下中間部分自由縮放，考慮到通常網站的主體部分在中間，用戶首先須要看到的是中間部分。因此將中間的div放在最上方，以下圖所示。

雙飛翼佈局經典實現

// HTML部分
<div class="container">
    <div class="main">
        <p>主內容欄自適應寬度</p>
    </div>

    <div class="aside-1">
        <p>側邊欄1固定寬度</p>
    </div>

    <div class="aside-2">
        <p>側邊欄2固定寬度</p>
    </div>
</div>

//css部分
.container {
    position: relative;
    width: 100%;
}
.container > div {
    position: absolute;
}
.main {
    width: 100%;
    padding: 0 200px;
    box-sizing: border-box;
}
.aside-1 {
    width: 200px;
    top: 0;
    left: 0;
}
.aside-2 {
    width: 200px;
    top: 0;
    right: 0;
}

雙飛翼佈局是IE6橫行時期，人們不得已採用的方法，很差理解，寫起來也很麻煩。今天我運用兩種如今瀏覽器支持的css屬性，簡化一下代碼。

雙飛翼佈局之個人實現

// html
<div class="container">
    <div class="main">
        <div class="middle">
            主內容欄自適應寬度
        </div>
    </div>

    <div class="aside-1">
        <p>側邊欄1固定寬度</p>
    </div>

    <div class="aside-2">
        <p>側邊欄2固定寬度</p>
    </div>
</div>

第一種:

// 利用flex佈局的order屬性，輕鬆實現。
.container {
    display: flex;
    width: 100%;
}

.main {
    flex: 1;
    order: 2;
}

.aside-1 {
    flex: 0 0 200px;
    order: 1;
}
 
 .aside-2 {
    flex: 0 0 200px;
    order: 3;
 }

//利用絕對定位，加上box-sizing，也能實現的效果。
.container {
    width: 100%;
}

.container > div {
    float: left;
}

.main {
    width: 100%;
}
.middle {
    margin: 0 200px;
}
.aside-1 {
    width: 200px;
    margin-left: -100%;
}
 
 .aside-2 {
    width: 200px;
    margin-left: -200px;
 }

如上可知，隨着前端發展的滾滾大潮所謂的雙飛翼、聖盃佈局中間會被歷史淘汰，迎來新的時期。