Flying wing css layout

introduction

Once in the rivers and lakes rumors Flying wing, I know. Probably means that the left and right sides of a fixed width box, leaving the middle part of the freedom scale, taking into account the main part of the site is generally in the middle, the user first needs to see is the middle part. Therefore, the intermediate div on the top, as shown below.

Flying wing classic achieve

// 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;
}

Flying wing is IE6 rampant period, people are forced to use the method, difficult to understand, but also to write a lot of trouble. Today, I am now using two browsers support the css properties, to simplify the code.

My realization Flying wing

 // 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>

The first:

// 利用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;
 }

As can be seen, along with the development of the front end of the rolling tide of so-called Flying wing, the Holy Grail layout middle will be eliminated by history, usher in a new era.