自適應佈局解析
自適應的佈局是開發中常用的,也是常考的。
首先說到自適應就不得不說彈性佈局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
flex-grow
值,flex-shrink
取 1,flex-basis
取 0%,如下是等同的:
.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%
}
內邊距的百分比是根據寬度的。