兩種方式實現CSS雙飛翼佈局

時間 2019-12-07

標籤兩種方式實現 css 雙飛佈局欄目 CSS 简体版

原文原文鏈接

雙飛翼佈局，就是兩端固定寬高，中間自適應的三欄佈局瀏覽器

先來張圖，左邊和右邊的灰色塊是固定寬高的，中間綠色的區域是寬高自適應佈局

方式一：經過flex彈性佈局來實現

看代碼flex

//HTML結構，div2是中間的自適應區域
...
<body>
    <div class="wrap">
        <div class="div1"></div>  
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
...

*{  //先簡單粗暴的解決一下瀏覽器的默認樣式  
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing:border-box;   //使用border-box，盒模型好計算，媽媽不再用擔憂我算不清塊寬高了
}
.wrap{
    width: 100%;
    height: 100%;
    display: flex;     //使用彈性佈局
    flex-flow:row nowrap;  //以沿主軸方向行顯示，不換行，從而來顯示3個塊
    justify-content:space-around;  //這一個加和不叫其實也沒事，加上去的意思就是兩端對齊
}

[class^='div']{  // 給全部的div都加上高和邊框樣式，方便觀看，否則都縮成一條線了
    height: 400px;
    border: 1px solid #f00;
}

.div1,.div3{  //給兩端的div固定的寬
    width: 200px;
    background-color: #ccc;
    flex-shrink: 1; //默認是1，因此不用寫也沒事，寫出來自是表達這個意思
}
.div2{
    background-color: #0f0;
    flex-grow:1;  //這個比較重要，做用是讓第二個塊的寬度撐滿剩餘的空間
}

方式二：經過定位來實現

HTML結構不變，看樣式spa

.wrap{
    width: 100%;  //一樣實現寬高100%鋪開
    height: 100%;
    position: relative;  //父層添加相對定位，讓子元素相對父層來定位
}
[class^='div']{
    height: 400px;
    border: 1px solid #f00;
}
.div1,.div3{
    position: absolute;
    width: 200px;
    background-color: #ccc;
}
.div1{
    left: 0;  //固定在父層的左側
    top: 0;
}
.div3{
    right: 0;  //固定在父層的右側
    top: 0;
}
.div2{
    background-color: #0f0;
    /*這個是關鍵，咱們沒有給中間的div2添加過寬屬性，因此默認佔用父層寬的100%，
     因爲兩側塊寬是固定的，因此中間的自適應塊左右分別200px的外邊距中間的content區域就會實現自適應*/
    margin: 0 200px;  
}