彈性布局flex

標籤：

前幾天寫過怪異盒子布局，以前在項目中用到彈性布局flex這個屬性，當時沒深入研究，這裡各種查閱各種測試，把這個屬性記錄下 以免忘記，

彈性布局：是提供一種更加有效方式來對一個容器中的條目進行排列、對齊和分配空白空間。即便容器中條目的尺寸未知或是動態變化的，彈性盒布局模型也能正常的工作。

讓一個盒子具有彈性布局的屬性，要先給其加上樣式display:flex；OK我們也會看到有寫的是display:box/display:flexbox；其實他們只是不同時期的規範：

• 新規範：2013年最新版本規範的文法 即display:flex/inline-flex;
• 中間版本：2011年非官方規範的文法 即display:flexbox/inline-flexbox;
• 老規範：2009年規範的文法 即display:box/inline-/box;

帶inline-的容器渲染為行內元素，沒帶的為區塊層級元素

可以看到flex近幾年幾種不同的寫法，相應的也帶來很多相容性問題，所以在開發過程中我們要兼顧所有版本,下面是瀏覽器版本的分界

Chrome：21+（新）20-（老）Safari： 6.1+（新）3.1+（老）Firefox：22+（新）2-21（老）IE：10（中間）Android: 4.4+（新）2.1+（老）iOS: 7.1+（新) 3.2+（老）

Chrome目前的版本仍然需要添加首碼“-webkit-”，而Firefox和Safari仍然還在使用最老版本的文法。Firefox已經更新為最新的規範，但是，在實際項目中目前最好還先別使用最新的規範，直到它被認為沒有bug了或者更穩定了，在使用。在這之前，Firefox還是使用最老的文法規範。ie10支援-ms-的寫法，（手機瀏覽器安全色這個還需要時間去測） 先定義父容器flex盒子併兼容寫法

  display: -webkit-box;  /* 老版本文法: Safari,  iOS, Android browser,     older WebKit browsers.  */  display: -moz-box;    /* 老版本文法: Firefox (buggy) */   display: -ms-flexbox;  /* 混合版本文法: IE 10 */  display: -webkit-flex;  /* 新版本           文法： Chrome 21+ */  display: flex;       /* 新版本文法： Opera 12.1, Firefox 22+ */

一個flexbox布局是由一個伸縮容器（flex container）和伸縮項目(flex items)組成，在伸縮容器中 所有的子項目都會變成伸縮項目，

        

好的 父容器盒子定義為伸縮容器後，裡面的伸縮項目會隨父容器中所加的樣式或自身樣式來進行如定義所說排列、對齊和分配空白空間

一，這6個屬性是加在父容器上的

flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

 

flex-direcotion

flex-direction：row | row-reverse | column | column-reverse

預設值：row

適用於：伸縮盒容器

繼承性：無

row：橫向從左至右排列（靠左對齊），預設的相片順序。

row-reverse：反轉橫向排列（靠右對齊，從後往前排，最後一項排在最前面。

column：縱向排列。

row-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

flex-wrap

flex-wrap：nowrap | wrap | wrap-reverse

預設值：nowrap

適用於：彈性盒模型容器

繼承性：無

nowrap：當子項目溢出父容器時不換行。wrap：當子項目溢出父容器時自動換行。wrap-reverse：反轉 wrap 排列。

flex-flow

flex-flow：[ flex-direction ] || [ flex-wrap ]

預設值：看各分拆屬性

適用於：彈性盒模型容器

繼承性：無

[ flex-direction ]：定義彈性盒子項目的排列方向。[ flex-wrap ]：定義彈性盒子項目溢出父容器時是否換行。

justify-content

justify-content：flex-start | flex-end | center | space-between | space-around

預設值：flex-start

適用於：彈性盒模型容器

繼承性：無

flex-start：彈性盒子項目將向行起始位置對齊。該行的第一個子項目的主起始位置的邊界將與該行的主起始位置的邊界對齊，同時所有後續的伸縮盒項目與其前一個項目對齊。

flex-end：彈性盒子項目將向行結束位置對齊。該行的第一個子項目的主結束位置的邊界將與該行的主結束位置的邊界對齊，同時所有後續的伸縮盒項目與其前一個項目對齊。

center：彈性盒子項目將向行中間位置對齊。該行的子項目將相互對齊並在行中置中對齊，同時第一個元素與行的主起始位置的邊距等同與最後一個元素與行的主結束位置的邊距（如果剩餘空間是負數，則保持兩端相等長度的溢出）。

space-between：彈性盒子項目會平均地分布在行裡。如果最左邊的剩餘空間是負數，或該行只有一個子項目，則該值等效於‘flex-start‘。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最後一個元素的邊界與行的主結束位置的邊距對齊，而剩餘的伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等。

space-around：彈性盒子項目會平均地分布在行裡，兩端保留子項目與子項目之間間距大小的一半。如果最左邊的剩餘空間是負數，或該行只有一個伸縮盒項目，則該值等效於‘center‘。在其它情況下，伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最後一個元素後的空間為其他空白空間的一半。

align-items

align-items：flex-start | flex-end | center | baseline | stretch

預設值：stretch

適用於：彈性盒模型容器

繼承性：無

flex-start：彈性盒子項目的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。

flex-end：彈性盒子項目的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。

center：彈性盒子項目在該行的側軸（縱軸）上置中放置。（如果該行的尺寸小於彈性盒子項目的尺寸，則會向兩個方向溢出相同的長度）。

baseline：如彈性盒子項目的行內軸與側軸為同一條，則該值與‘flex-start‘等效。其它情況下，該值將參與基準對齊。

stretch：如果指定側軸大小的屬性值為‘auto‘，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照‘min/max-width/height‘屬性的限制。

align-content

align-content：flex-start | flex-end | center | space-between | space-around | stretch

預設值：stretch

適用於：多行的彈性盒模型容器

繼承性：無

flex-start：各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，之後的每一行都緊靠住前面一行。

flex-end：各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，之後的每一行都緊靠住前面一行。

center：各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中置中對齊，保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。（如果剩下的空間是負數，則各行會向兩個方向溢出的相等距離。）

space-between：各行在彈性盒容器中平均分布。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於‘flex-start‘。在其它情況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩餘的行則按一定方式在彈性盒視窗中排列，以保持兩兩之間的空間相等。

space-around：各行在彈性盒容器中平均分布，兩端保留子項目與子項目之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於‘center‘。在其它情況下，各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半。

stretch：各行將會伸展以佔用剩餘的空間。如果剩餘的空間是負數，該值等效於‘flex-start‘。在其它情況下，剩餘空間被所有行平分，以擴大它們的側軸尺寸。

更多測試執行個體 點擊進入

二，這6個屬性是加在項目上的

orderflex-growflex-shrinkflex-basisflexalign-self

order

order：<integer>

預設值：0

適用於：彈性盒模型容器子項目

繼承性：無

取值：用整數值來定義排列順序，數值小的排在前面。可以為負值。

flex-grow

flex-grow：<number>

預設值：0

適用於：彈性盒模型容器子項目

繼承性：無

取值：用數值來定義擴充比率。不允許負值，預設值為0；

flex-shrink

flex-shrink：<number>

預設值：1

適用於：彈性盒模型容器子項目

繼承性：無

取值：用數值來定義收縮比率。不允許負值，預設值為1；

flex-basis

flex-basis：<length> | <percentage> | auto

預設值：auto

適用於：彈性盒模型容器子項目

繼承性：無

auto：無特定寬度值，取決於其它屬性值

<length>：用長度值來定義寬度。不允許負值

<percentage>：用百分比來定義寬度。不允許負值

flex

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

預設值：看各分拆屬性

適用於：彈性盒模型子項目

繼承性：無

none：none關鍵字的計算值為: 0 0 auto

[ flex-grow ]：定義彈性盒子項目的擴充比率。

[ flex-shrink ]：定義彈性盒子項目的收縮比率。

[ flex-basis ]：定義彈性盒子項目的預設基準值。

algin-self

align-self：auto | flex-start | flex-end | center | baseline | stretch

預設值：auto

適用於：彈性盒模型子項目

繼承性：無

auto：如果‘align-self‘的值為‘auto‘，則其計算值為元素的父元素的‘align-items‘值，如果其沒有父元素，則計算值為‘stretch‘。

flex-start：彈性盒子項目的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。

flex-end：彈性盒子項目的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。

center：彈性盒子項目在該行的側軸（縱軸）上置中放置。（如果該行的尺寸小於彈性盒子項目的尺寸，則會向兩個方向溢出相同的長度）。

baseline：如彈性盒子項目的行內軸與側軸為同一條，則該值與‘flex-start‘等效。其它情況下，該值將參與基準對齊。

stretch：如果指定側軸大小的屬性值為‘auto‘，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照‘min/max-width/height‘屬性的限制。

更多測試執行個體 點擊進入

彈性布局flex