佈局的傳統解決方案,基於盒狀模型,依賴 display
屬性 + position
屬性 + float
屬性。它對於那些特殊佈局很是不方便,好比,垂直居中就不容易實現。因此在2009年,w3c提出了一種能夠簡潔、快速彈性佈局的屬性,主要思想是給予容器控制內部元素高度和寬度的能力,這就是今天要說的Flexible Box,彈性佈局。css
因爲瀏覽器的限制,在寫代碼以前推薦查詢一下兼容模式,瞭解下目前flex的支持程度,咱們能夠經過CanIuse這個網站來進行查詢,以下圖,能夠看到,除了對於IE支持通常以外,其餘瀏覽器大多沒啥毛病,但爲了以防萬一,在寫代碼的時候仍是加上-webkit-
這一前綴以防萬一。html
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
複製代碼
重點!flex一共有兩根軸:main axis(主軸)和cross axis(交叉軸),你們通常認爲主軸就是水平,交叉軸就是垂直的。可是!這是錯誤的!請與水平垂直這兩個方位的概念區分開,這是一個方位,若是說當年定義的時侯爲何不命名爲vertical&horizon??緣由就是main axis沒有一個固定的方位,因此請不要再經過水平垂直的方位來理解了。那麼主軸是怎麼區分的呢?其實很簡單按照當前flex的方向,是水平排列仍是垂直排列。若是是水平排列(row),主軸就是水平的,交叉軸就是垂直的,反之亦然。這是一個很重要的概念。web
注意,設爲 Flex 佈局之後,子元素的float、clear和vertical-align屬性將失效。瀏覽器
flex-direction :該元素決定主軸的方向(即子元素的排列方向) 默認值 :row 適用於 :flex 容器bash
屬性 | 描述 |
---|---|
row | 主軸爲水平方向,起點在左端。 |
row-reverse | 主軸爲水平方向,起點在右端。 |
column | 主軸爲垂直方向,起點在上沿。 |
column-reverse | 主軸爲垂直方向,起點在下沿。 |
flex-wrap :設置或檢索伸縮盒對象的子元素超出父容器時是否換行 默認值 :nowrap 適用於 :flex 容器ide
屬性 | 描述 |
---|---|
nowrap | 不換行(默認) |
wrap | 換行,第一行在上方 |
wrap-reverse | 換行,第一行在下方 |
PS: flex-flow
屬性是 flex-direction
屬性和 flex-wrap
屬性的簡寫形式,默認值爲 row nowrap
佈局
.box {
flex-flow: flex-direction flex-wrap|initial|inherit;
}
複製代碼
justify-content :定義了子元素在主軸上的對齊方式。 默認值 :flex-start 適用於 :flex 容器flex
屬性 | 描述 |
---|---|
flex-start | 左對齊(主軸起點對齊) |
flex-end | 右對齊(主軸終點對齊) |
center | 居中 |
space-between | 兩端對齊,項目之間的間隔都相等 |
space-around | 每一個項目兩側的間隔相等。因此,項目之間的間隔比項目與邊框的間隔大一倍 |
align-items :定義了子元素在交叉軸上的對齊方式 默認值 :stretch 適用於 :flex 容器網站
屬性 | 描述 |
---|---|
flex-start | 交叉軸的起點對齊 |
flex-end | 交叉軸的終點對齊 |
center | 交叉軸的中點對齊 |
baseline | 子元素第一行文字的基線對齊,若是子標籤內沒有內容,將按照每一個 div 的底部對齊 |
stretch | 若是項目未設置高度或設爲auto,將佔滿整個容器的高度 |
align-items: stretch 時每一個子元素的 height 必須爲 auto 不然 height 屬性會覆蓋 stretch 的效果ui
若是 div 內沒有內容,或者子標籤內沒有內容,將按照每一個 div 的底部對齊
align-content :定義多根軸線的對齊方式,若是子元素只有一根軸線,該屬性不起做用 默認值 :stretch 適用於 :多行的彈性盒模型容器
屬性 | 描述 |
---|---|
flex-start | 與交叉軸的起點對齊 |
flex-end | 與交叉軸的終點對齊 |
center | 與交叉軸的中點對齊 |
space-between | 與交叉軸兩端對齊,軸線之間的間隔平均分佈 |
space-around | 每根軸線兩側的間隔都相等。因此,軸線之間的間隔比軸線與邊框的間隔大一倍 |
stretch | 軸線佔滿整個交叉軸 |
PS: 在上面的例子 flex-wrap 需設爲 wrap, 且數量超出一行, 父容器的高度相對於子容器有多餘,才能看到效果
order :定義子元素的排列順序,數值越小,排列越靠前 默認值:0 適用於:flex子項和flex容器中的絕對定位子元素
PS:用整數值來定義排列順序,數值小的排在前面。元素的值能夠爲負值
flex-grow :定義子元素的放大比例 默認值 :0 適用於 :flex子項
<ul class="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
複製代碼
.flex{display:flex;width:600px;margin:0;padding:0;list-style:none;}
.flex li {text-align:center;height:100px;}
.flex li:nth-child(1){width:200px;background-color:green;}
.flex li:nth-child(2){flex-grow:1;width:50px;background-color:yellow;}
.flex li:nth-child(3){flex-grow:3;width:50px;background-color:red;}
複製代碼
flex-grow的默認值爲0,若是沒有顯示定義該屬性,是不會擁有分配剩餘空間權利的。 本例中b,c兩項都顯式的定義了flex-grow,flex容器的剩餘空間分紅了4份,其中b佔1份,c佔3分,即1:3 flex容器的剩餘空間長度爲:600-200-50-50=300px,因此最終a,b,c的長度分別爲:
a: 200px
b: 50+(300/4*1)=125px
c: 50+(300/4*3)=275px
flex-shrink :定義子元素的收縮比例(與flex-grow相反) 默認值 :1 適用於 :flex子項
<ul class="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
複製代碼
.flex{display:-webkit-flex;display:flex;width:400px;margin:0;padding:0;list-style:none;}
.flex li{width:200px;}
.flex li:nth-child(1){background:#888;}
.flex li:nth-child(2){background:#ccc;}
.flex li:nth-child(3){-webkit-flex-shrink:3;flex-shrink:3;background:#aaa;}
複製代碼
flex-shrink的默認值爲1,若是沒有顯示定義該屬性,將會自動按照默認值1在全部因子相加以後計算比率來進行空間收縮。
本例中c顯式的定義了flex-shrink,a,b沒有顯式定義,但將根據默認值1來計算,能夠看到總共將剩餘空間分紅了5份,其中a佔1份,b佔1份,c佔3分,即1:1:3
咱們能夠看到父容器定義爲400px,子項被定義爲200px,相加以後即爲600px,超出父容器200px。那麼這麼超出的200px須要被a,b,c消化
經過收縮因子,因此加權綜合可得200*1+200*1+200*3=1000px;
因而咱們能夠計算a,b,c將被移除的溢出量是多少:
a被移除溢出量:(200*1/1000)*200,即約等於40px
b被移除溢出量:(200*1/1000)*200,即約等於40px
c被移除溢出量:(200*3/1000)*200,即約等於120px
最後a,b,c的實際寬度分別爲:200-40=160px, 200-40=160px, 200-120=80px
PS:若是全部項目的 flex-shrink 屬性都爲 1,當空間不足時,都將等比例縮小。若是一個項目的 flex-shrink 屬性爲0,其餘項目都爲 1,則空間不足時,前者不縮小。負值對該屬性無效。
flex-basis :設置或檢索彈性盒伸縮基準值 默認值 :auto 適用於 :flex子項
flex-basis 控制元素的默認尺寸,而後再由其餘 Flexbox 屬性控制,能夠覆蓋 width 屬性
flex-basis 能夠和 width(主軸爲水平狀態)或者height(主軸爲垂直狀態) 屬性互換
PS:flex-basis 是經過主軸 (main axis) 來影響元素尺寸的
align-self:容許單個子元素有與其餘項目不同的對齊方式,可覆蓋align-items屬性 默認值 :auto 適用於 :flex子項
屬性 | 描述 |
---|---|
auto | 繼承父元素的"align-items"值,若是其沒有父元素,等同於"stretch" |
flex-start | 交叉軸的起點對齊 |
flex-end | 交叉軸的終點對齊 |
center | 交叉軸的中點對齊 |
baseline | 第一行文字的基線對齊 |
stretch | 若是項目未設置高度或設爲auto,將佔滿整個容器的高度 |
父元素: align-items:flex-end
a: align-self: flex-end
b: align-self: center
c: align-self: flex-start
d: align-self: baseline; padding: 20px 10px
e: align-self: baseline
f: align-self: stretch
g: align-self: auto