自適應的佈局是開發中常用的，也是常考的。

首先說到自適應就不得不說彈性佈局flex，flex不多贅述，自行去百度，但很多文件對於flex的介紹不詳細。下面是對於flex佈局文件的補充：

flex屬性 是 flex-grow、flex-shrink、flex-basis的縮寫。flex 的預設值是以上三個屬性值的組合。假設以上三個屬性同樣取預設值，則 flex 的預設值是 0 1 auto。同理，如下是等同的：

.item {flex: 2333 3222 234px;}

.item {

flex-grow: 2333;

flex-shrink: 3222;

flex-basis: 234px;

}
 

當 flex 取值為 none，則計算值為 0 0 auto，如下是等同的：

.item {flex: none;}

.item {

flex-grow: 0;

flex-shrink: 0;

flex-basis: auto;

}

​​​​當 flex 取值為 auto，則計算值為 1 1 auto，如下是等同的：

.item {flex: auto;}

.item {

flex-grow: 1;

flex-shrink: 1;

flex-basis: auto;

}

​​​​當 flex

.item {flex: 1;}

.item {

flex-grow: 1;

flex-shrink: 1;

flex-basis: 0%;

}

​​​​​當 flex 取值為一個長度或百分比，則視為 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情況（注意 0% 是一個百分比而不是一個非負數字）：

.item-1 {flex: 0%;}

.item-1 {

flex-grow: 1;

flex-shrink: 1;

flex-basis: 0%;

}

.item-2 {flex: 24px;}

.item-1 {

flex-grow: 1;

flex-shrink: 1;

flex-basis: 24px;

}

​​​​​當 flex 取值為兩個非負數字，則分別視為 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：

.item {flex: 2 3;}

.item {

flex-grow: 2;

flex-shrink: 3;

flex-basis: 0%;

}

當 flex 取值為一個非負數字和一個長度或百分比，則分別視為 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 2333 3222px;}

.item {

flex-grow: 2333;

flex-shrink: 1;

flex-basis: 3222px;

}

flex-basis 規定的是子元素的基準值。所以是否溢位的計算與此屬性息息相關。flex-basis 規定的範圍取決於 box-sizing。這裡主要討論以下 flex-basis 的取值情況：

• auto：首先檢索該子元素的主尺寸，如果主尺寸不為 auto，則使用值採取主尺寸之值；如果也是 auto，則使用值為 content。

• content：指根據該子元素的內容自動佈局。有的使用者代理沒有實現取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。

• 百分比：根據其包含塊（即伸縮父容器）的主尺寸計算。如果包含塊的主尺寸未定義（即父容器的主尺寸取決於子元素），則計算結果和設為 auto 一樣。

具體佈局解析：

一.三列布局，左右固定，中間自適應

1.左右浮動或使用絕對定位，中間使用margin

.left,.right,.middle{
    height: 600px;
}
.left{
    width: 200px;
    float：left
}
.middle{
    margin: 0 310px 0 210px;
}
.right{
    width: 300px;
    float：right
}

2.flex佈局

.container{
    width:100%;
    display:flex;
}
.left,.right{
    height:500px;
}
.middle{
    flex:1
}

簡單說一下flex佈局，使用flex佈局時在容器中設定display:flex,容器上較為常用的屬性有justify-content和align-items，設定center可使容器內元素水平居中和垂直居中。容器內元素常用的屬性為flex，flex的預設值是 0 1 auto，設定flex為1時，元素大小為響應式，隨空間大小放大縮小。

二.正方形邊長自適應

.fang{
    width:100%;
    padding-bottom:100%
}

內邊距的百分比是根據寬度的。