Webkit Flex伸縮盒模型屬性備忘

一個元素被定義display:-webkit-flex;則此元素即爲伸縮盒模型中的伸縮容器，其包含的子元素是伸縮項目。 flex是一個複合屬性。Flexbox伸縮佈局盒模型中的伸縮容器及伸縮特性定義。 由多個伸縮項目組成其具體的佈局方式。 是爲了呈現複雜的應用與頁面而設計出來的。

display:-webkit-flex; 

-webkit-flex: none | [flex-grow flex-shrink || flex-basis] | initial | auto

none	在任何狀況都不會發生伸縮
flex-grow	擴展比率
flex-shrink	收縮比率
flex-basis	伸縮基準值
initial	在有剩餘空間的狀況下不會有任何變化，可是在必要的狀況下會被收縮
auto	會根據主軸自動伸縮以佔用全部剩餘空間，很是相似於普通流中的自動外邊距

 

示例：

CSS

1 .flexBox{ display:-webkit-flex;-webkit-flex-flow: row;-webkit-flex-wrap: nowrap; width:600px; margin:50px auto; background-color:#9CF}
2 .flexBox div{ height:100px;}
3 .flexBox .item1{-webkit-flex:1;background:#ff9900;}
4 .flexBox .item2{-webkit-flex:1;background:#936;}
5 .flexBox .item3{-webkit-flex:1;background:#39C;}

HTML：

1 <div class="flexBox">
2  <div class="item1">1</div>
3  <div class="item2">2</div>
4  <div class="item3">3</div>
5  <div style=" width:300px; background-color:#96F">固定寬度300px</div>
6 </div>

結果：

總寬度，600px,給子元素4定義了width:300px，子元素一、二、3定義了flex伸縮屬性，那麼剩餘空間就會按照1:1:1分割給這三個子元素

 -webkit-flex-basis：用來設置「flex-basis」長度並指定伸縮基準值，也就是根據可伸縮比率計算出剩餘空間的分佈以前，伸縮項目主軸長度的起始數值，若在「flex」縮寫省略了此部件，則「flex-basis」的指定值是長度零。 若「flex-basis」的指定值是「auto」，則伸縮基準值的指定值是元素主軸長度屬性的值。（這個值多是關鍵字「auto」，表明元素的長度取決於其內容。）

有點繞，便是說對子元素設置了-webkit-flex-basis基準值，在計算剩餘空間前，該項在基準值上進行伸縮，例如

<div class="flexBox">
 <div class="item1" style="-webkit-flex-basis:150px;">1</div>
 <div class="item2">2</div>
 <div class="item3">3</div>
 <div style=" width:300px; background-color:#96F">固定寬度300px</div>
</div>

CSS同上面的例子，僅僅修改了HTML的第一個子元素，爲這個子元素添加了一個樣式屬性-webkit-flex-basis:150px;，設置第一個元素的基準值爲150px,結果以下：

未設基準值之前，一、二、3 三個元素的長度都是200px，也就是容器總寬度600px減去固定寬度300px後剩餘300xp再1:1:1進行伸縮的結果。

設置第一個子元素-webkit-flex-basis:150px;後，一、二、3三個元素的寬度分別爲：200px、50px、50px。

我的理解在計算出剩餘空間300px後，先算出每一個元素的伸縮基準值(不寫默認爲0px)，剩餘空間減去每一個元素的伸縮基準值後的空間再按比例進行分配，因此上面的結果是

300px-150px=150px,這150px按照1:1:1分配應該給一、二、3號元素各分50px,因爲1號子元素的基準值是150px，因此1號元素的寬度爲150+50=200px，二、3號元素爲50+0=50px.

 若是給元素設置了width屬性，-webkit-flex-basis的值就是width值

-webkit-flex-direction：row(子元素優先排成一行)|row-reverse(反轉)|column(子元素優先排成多行，每行排列一個)|column-reverse(反轉)

具體實例地址：http://ued.ctrip.com/blog/wp-content/webkitcss/demo/flex-direction.html

 -webkit-flex-grow：指定擴展比率，也就是剩餘空間是正值的時候此伸縮項目相對於伸縮容器裏其餘伸縮項目能分配到空間比例。若省略了此部件，則它會被設爲「1」，若是設置爲0，則該元素將不會參與空間分配，必須加上auto參數(-webkit-flex:0 auto;),其寬度依據內容而定，若是不加auto參數，寬度將會是0px,致使內容不可見。

-webkit-flex-shrink：指定收縮比率，也就是剩餘空間是負值的時候此伸縮項目相對於伸縮容器裏其餘伸縮項目能收縮的空間比例。若省略了此部件，則它會被設爲「1」。在收縮的時候收縮比率會以伸縮基準值加權。

收縮示例：

CSS/HTML：

 1 .flexBox{ display:-webkit-flex;-webkit-flex-flow: row;-webkit-flex-wrap: nowrap; width:600px; margin:50px auto; background-color:#9CF}
 2 .flexBox div{ height:100px; width:150px}
 3 .flexBox .item1{background:#ff9900;}
 4 .flexBox .item2{background:#936;}
 5 .flexBox .item3{background:#39C;}
 6 
 7 <div class="flexBox">
 8  <div class="item1">1</div>
 9  <div class="item2">2</div>
10  <div class="item3">3</div>
11  <div style=" width:300px; background-color:#96F">固定寬度300px</div>
12 </div>

結果：

初始設定一、二、3號元素的寬度爲150px,4號元素寬度爲300px。而實際一、二、三、4號元素的寬度分別是120px、120px、120px、240px。這是伸縮盒縮的結果。

容器總寬度爲600px，若是按照實際，4個子元素的總寬度應該爲750px，因此容器應該差150px才能知足要求，而容器寬度不會自動增大，爲了知足現實，就必須縮小每一個子元素的寬度。

因爲未設-webkit-flex-basis基準值，因此每個子元素的基準值就是它的寬度，因此一、二、三、4的基準值分別爲150px,150px,150px和300px;。

在收縮的時候收縮比率會以伸縮基準值加權，初始收縮比率是1:1:1:1，因爲4號元素的基準值是300px，因此收縮率要加權，結果300/150=2，因此它們的收縮比率分別爲1:1:1:2。

計算收縮寬度爲（差值*比率）1:150*1/5=30px、2:150*1/5=30px、3:150*1/5=30px、4:150*2/5=60px；

四個元素的寬度分別爲150-30=120、150-30=120、150-30=120、300-60=240。

 -webkit-flex-wrap：控制伸縮容器是單行仍是多行，也決定了側軸方向 ― 新的一行的排列方向

nowrap	伸縮容器爲單行。側軸起點方向等同於當前書寫模式的起點或前／頭在側軸的那一邊，而側軸終點方向是側軸起點的相反方向
wrap	伸縮容器能夠建立多行,新增的伸縮行根據側軸的方向添加
wrap-reverse	除了側軸起點與側軸終點方向交換之外同「wrap」

示例地址：http://ued.ctrip.com/blog/wp-content/webkitcss/demo/flex-wrap.html

在屬性設置爲wrap時，容器會自動判斷子元素的寬度決定是否換行，能夠給子元素設置min-width或width屬性配合使用。

接着上一個例子收縮來講，若是設定了子元素寬度而又不肯意收縮，能夠設置-webkit-flex-wrap：wrap

結果爲：

一、二、三、4號元素寬度就是實際的值150、150、150、300px。一行排不下時自動換行，因爲未設置-webkit-flex屬性，因此不會自動拉伸。

flex-flow： flex-direction 和 flex-wrap 的縮寫，例如：-webkit-flex-flow: column nowrap;

 -webkit-align-content：基於Flex佈局，用來指定多行伸縮容器的對齊。在使用 wrap 關鍵字的多行伸縮容器上，你也能夠指定行與行之間空白的分配方法。僅在伸縮容器在側軸佔有固定的空間時（例：伸縮子元素橫排的時候伸縮容器有固定高）纔有做用

flex-start	將伸縮行捆在主軸起始端，將空白留到結尾端
flex-end	將伸縮行捆在主軸結尾端，將空白留到起始端
center	將伸縮行捆在主軸的中間位置，將空白平均分到兩端
stretch	將全部項目伸長，讓項目佔據了整個側軸的長度
space-around	沿着側軸將空白均分到伸縮行之間與外側（行之間空白的二分之一）
space-between	跟 space-around 的效果很相像，可是分配到開始、結尾兩端的空間比較少

基於上一個例子，設置容器屬性<div class="flexBox" style="-webkit-flex-wrap:wrap; height:300px;-webkit-align-content:space-between ">，給一個固定的高度。

flex-start：                             flex-end：                                     center： 

   

space-around:                              space-between:

  

若是不設置-webkit-align-content屬性，父容器設置了高度，子元素也設置了高度，可是父容器高度有剩餘空間，其默認佈局以下：

上圖父容器高度500px，每一個子元素高度100px。

-webkit-align-items :基於Flex佈局，用來指定容器內內容的沿着側軸方向的對齊方式

flex-start	將全部項目對着側軸的起始方向對齊
flex-end	將全部項目對着側軸的結尾方向對齊
center	將全部項目對着側軸的中心對齊
stretch	將全部項目伸長，讓項目佔據了整個側軸的長度
baseline	果伸縮項目的行內軸與側軸爲同一條，則該值與「flex-start」等效。 其它狀況下，該值將參與基線對齊。全部參與該對齊方式的伸縮項目將按下列方式排列：首先將這些伸縮項目的基線進行對齊，隨後其中基線至側軸起點邊的外邊距距離最長的那個項目將緊靠住該行在側軸起點的邊。

基於上一個例子，修改<div class="flexBox" style="-webkit-flex-wrap:wrap; height:300px;">

設置四個子元素爲不一樣高度分別爲150、120、1十、100px

對比-webkit-align-content和-webkit-align-items設置相同值下的不一樣表現，

-webkit-align-content:flex-start      -webkit-align-content:flex-end        -webkit-align-content:center  

                      

-webkit-align-items:flex-start         -webkit-align-items:flex-end            -webkit-align-items:center 

                      

stretch下二者表現一致(不能設置固定高度)，baseline,沿基線對齊，基線根據伸縮項目的內容計算獲得

W3C官方關於-webkit-align-items的圖例：

-webkit-align-self：基於Flex佈局，用來指定多行伸縮容器的對齊。align-self 可讓你爲單獨的伸縮子元素設置 align-items 的行爲，會覆蓋 align-items。

flex-start	將全部項目對着側軸的起始方向對齊
flex-end	將全部項目對着側軸的結尾方向對齊
center	將全部項目對着側軸的中心對齊
stretch	將全部項目伸長，讓項目佔據了整個側軸的長度。若是側軸長度屬性的值爲「auto」，則此值會使項目的外邊距盒的尺寸在遵守「min/max-width/height」屬性的限制下儘量接近所在行的尺寸。注：注意：若是伸縮伸縮的高度有限制，此可能致使伸縮項目的內容溢出該項目。伸縮項目在側軸起點邊的外邊距會緊靠住該行在側軸起點的邊。
baseline	若是伸縮項目的行內軸與側軸爲同一條，則該值與「flex-start」等效。 其它狀況下，該值將參與基線對齊。全部參與該對齊方式的伸縮項目將按下列方式排列：首先將這些伸縮項目的基線進行對齊，隨後其中基線至側軸起點邊的外邊距距離最長的那個項目將緊靠住該行在側軸起點的邊

示例：HTML

<div class="flexBox" style="-webkit-flex-wrap:wrap; height:300px;-webkit-align-content:flex-end;">
 <div class="item1" style="height:150px;">1</div>
 <div class="item2" style="height:120px;-webkit-align-self:flex-end">2</div>
 <div class="item3" style="height:110px;">3</div>
 <div style=" width:300px; background-color:#96F">四、固定寬度300px</div>
</div>

結果：第一幅圖爲2號元素不加-webkit-align-self:flex-end屬性，第二幅圖爲添加後的表現

 

-webkit-justify-content：用於調整主軸上伸縮項目的位置。它指定子元素間多餘的空白要如何處理（在你讓子元素與其外邊距佔滿主軸上的全部空間的時候，這個屬性沒有做用）

flex-start	伸縮項目向一行的起始位置靠齊。該行的第一個伸縮項目在主軸起點邊的外邊距與該行在主軸起點的邊對齊，同時全部後續的伸縮項目與其前一個項目對齊
flex-end	伸縮項目向一行的結束位置靠齊。該行的最後一個伸縮項目在主軸終點邊的外邊距與該行在主軸終點的邊對齊，同時全部前面的伸縮項目與其後一個項目對齊
center	伸縮項目向一行的中間位置靠齊。該行的伸縮項目將相互對齊並在行中居中對齊，同時第一個項目與該行的在主軸起點的邊的距離等同與最後一個項目與該行在主軸終點的邊的距離（若是剩餘空間是負數，則保持兩端溢出的長度相等）
space-between	伸縮項目會平均地分佈在一行裏。若是剩餘空間是負數，或該行只有一個伸縮項目，則此值等效於「flex-start」。在其它狀況下，第一個項目在主軸起點邊的外邊距會與該行在主軸起點的邊對齊，同時最後一個項目在主軸終點邊的外邊距與該行在主軸終點的邊對齊，而剩下的伸縮項目在確保兩兩之間的空白空間相等下平均分佈
space-around	伸縮項目會平均地分佈在一行裏。若是剩餘空間是負數，或該行只有一個伸縮項目，則此值等效於flex-start。在其它狀況下，第一個項目在主軸起點邊的外邊距會與該行在主軸起點的邊對齊，同時最後一個項目在主軸終點邊的外邊距與該行在主軸終點的邊對齊，而剩下的伸縮項目在確保兩兩之間的空白空間相等下平均分佈

修改容器<div class="flexBox" style="-webkit-flex-wrap:wrap; height:300px;-webkit-align-content:flex-start;-webkit-justify-content:flex-start">，各子元素不一樣高度

    flex-start                               flex-end                                            center  

         

space-around                                space-between

   

 W3C關於-webkit-justify-content的圖例

 

order:顯示順序，設置伸縮項目的 order 能夠調整它們渲染時的順序，order越想排列越靠前(負數也能夠)

示例：

1 .flexBox{ display:-webkit-flex;-webkit-flex-flow:row wrap; width:600px; margin:50px auto; background-color:#9CF}
2 .flexBox div{ height:100px; width:150px}
3 .flexBox .item1{background:#ff9900;}
4 .flexBox .item2{background:#936;}
5 .flexBox .item3{background:#39C;}

1 <div class="flexBox" style="height:200px;">
2  <div class="item1">1</div>
3  <div class="item2" style="order:-1">2</div>
4  <div class="item3">3</div>
5 </div>

結果：

margin:外邊距，在伸縮盒中，它能作同普通margin同樣的事情，可是更增強大。一個 "auto" 的 margin 會合並剩餘的空間。它能夠用來把伸縮項目擠到其餘位置。

1 <div class="flexBox" style="height:200px;">
2  <div class="item1" style="margin:auto">1</div>
3  <div class="item2">2</div>
4  <div class="item3">3</div>
5 </div>

結果以下：

若是對三個子元素均設置margin:auto屬性，結果以下：

三個元素等間距並垂直居中，很強大。

若是去掉第2和第3個元素，就能實現之前難以實現的真居中效果，並且擴展性很是強

 

 

以上內容參考自http://ued.ctrip.com/blog/wp-content/webkitcss/quicksearch.html和http://www.w3cplus.com/blog/666.html

我的初學，理解有限，若有錯誤，歡迎指正。

本文地址:http://www.cnblogs.com/wangjiajun/p/3994263.html