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

display:-webkit-flex;?

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

noneflex-growflex-shrinkflex-basisinitialauto

在任何情況都不會發生伸縮

擴展比率

收縮比率

伸縮基準值

在有剩余空間的情況下不會有任何變化，但是在必要的情況下會被收縮

會根據主軸自動伸縮以占用所有剩余空間，非常類似于普通流中的自動外邊距

?

示例：

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，子元素1、2、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,結果如下：

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

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

個人理解在計算出剩余空間300px后，先算出每個元素的伸縮基準值(不寫默認為0px)，剩余空間減去每個元素的伸縮基準值后的空間再按比例進行分配，所以上面的結果是

300px-150px=150px,這150px按照1:1:1分配應該給1、2、3號元素各分50px,由于1號子元素的基準值是150px，所以1號元素的寬度為150+50=200px，2、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>

結果：

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

容器總寬度為600px，如果按照實際，4個子元素的總寬度應該為750px，所以容器應該差150px才能滿足要求，而容器寬度不會自動增大，為了滿足現實，就必須縮小每個子元素的寬度。

由于未設-webkit-flex-basis基準值，所以每一個子元素的基準值就是它的寬度，所以1、2、3、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：控制伸縮容器是單行還是多行，也決定了側軸方向 ― 新的一行的排列方向

nowrapwrapwrap-reverse

伸縮容器為單行。側軸起點方向等同于當前書寫模式的起點或前／頭在側軸的那一邊，而側軸終點方向是側軸起點的相反方向

伸縮容器可以創建多行,新增的伸縮行根據側軸的方向添加

除了側軸起點與側軸終點方向交換以外同「wrap」

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

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

接著上一個例子收縮來說，如果設定了子元素寬度而又不愿意收縮，可以設置-webkit-flex-wrap：wrap

結果為：

1、2、3、4號元素寬度就是實際的值150、150、150、300px。一行排不下時自動換行，由于未設置-webkit-flex屬性，所以不會自動拉伸。

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

?-webkit-align-content：基于Flex布局，用來指定多行伸縮容器的對齊。在使用 wrap 關鍵字的多行伸縮容器上，你也可以指定行與行之間空白的分配方法。僅在伸縮容器在側軸占有固定的空間時（例：伸縮子元素橫排的時候伸縮容器有固定高）才有作用

flex-startflex-endcenterstretchspace-aroundspace-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-startflex-endcenterstretchbaseline

將所有項目對著側軸的起始方向對齊

將所有項目對著側軸的結尾方向對齊

將所有項目對著側軸的中心對齊

將所有項目伸長，讓項目占據了整個側軸的長度

果伸縮項目的行內軸與側軸為同一條，則該值與「flex-start」等效。 其它情況下，該值將參與基線對齊。所有參與該對齊方式的伸縮項目將按下列方式排列：首先將這些伸縮項目的基線進行對齊，隨后其中基線至側軸起點邊的外邊距距離最長的那個項目將緊靠住該行在側軸起點的邊。

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

設置四個子元素為不同高度分別為150、120、110、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-startflex-endcenterstretchbaseline

將所有項目對著側軸的起始方向對齊

將所有項目對著側軸的結尾方向對齊

將所有項目對著側軸的中心對齊

將所有項目伸長，讓項目占據了整個側軸的長度。如果側軸長度屬性的值為「auto」，則此值會使項目的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下盡可能接近所在行的尺寸。注：注意：如果伸縮伸縮的高度有限制，此可能導致伸縮項目的內容溢出該項目。伸縮項目在側軸起點邊的外邊距會緊靠住該行在側軸起點的邊。

如果伸縮項目的行內軸與側軸為同一條，則該值與「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">4、固定寬度300px</div> </div>

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

?

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

flex-startflex-endcenterspace-betweenspace-around

伸縮項目向一行的起始位置靠齊。該行的第一個伸縮項目在主軸起點邊的外邊距與該行在主軸起點的邊對齊，同時所有后續的伸縮項目與其前一個項目對齊

伸縮項目向一行的結束位置靠齊。該行的最后一個伸縮項目在主軸終點邊的外邊距與該行在主軸終點的邊對齊，同時所有前面的伸縮項目與其后一個項目對齊

伸縮項目向一行的中間位置靠齊。該行的伸縮項目將相互對齊并在行中居中對齊，同時第一個項目與該行的在主軸起點的邊的距離等同與最后一個項目與該行在主軸終點的邊的距離（如果剩余空間是負數，則保持兩端溢出的長度相等）

伸縮項目會平均地分布在一行里。如果剩余空間是負數，或該行只有一個伸縮項目，則此值等效于「flex-start」。在其它情況下，第一個項目在主軸起點邊的外邊距會與該行在主軸起點的邊對齊，同時最后一個項目在主軸終點邊的外邊距與該行在主軸終點的邊對齊，而剩下的伸縮項目在確保兩兩之間的空白空間相等下平均分布

伸縮項目會平均地分布在一行里。如果剩余空間是負數，或該行只有一個伸縮項目，則此值等效于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

轉載于:https://www.cnblogs.com/wangjiajun/p/3994263.html

總結

以上是生活随笔為你收集整理的Webkit Flex伸缩盒模型属性备忘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。