Flex佈局兼容知識點總結

Flex佈局兼容知識點總結

假設父容器class爲 box,子項目爲item.
舊版語法以下：
一：定義容器的display屬性。
舊語法以下寫法：

.box {
    display: -moz-box; 
    display: -webkit-box;
    display: box;
}

新版語法須要以下寫：

.box{
    display: -webkit-flex; 
    display: flex;
}

或者 行內

.box{
    display: -webkit-inline-flex;
    display:inline-flex;
}

二：容器屬性(舊版語法)
1. box-pack 屬性;(水平方向上對齊方式)
box-pack定義子元素主軸對齊方式。

.box{
    -moz-box-pack: center; 
    -webkit-box-pack: center; 
    box-pack: center;
}

box-pack屬性總共有4個值：

.box{
   box-pack: start | end | center | justify;
   /*主軸對齊：左對齊（默認） | 右對齊 | 居中對齊 | 左右對齊*/
}

各個值的含義以下：
start: 
   對於正常方向的框，首個子元素的左邊緣被放在左側（最後的子元素後是全部剩餘的空間)
   對於相反方向的框，最後子元素的右邊緣被放在右側（首個子元素前是全部剩餘的空間）
end:
  對於正常方向的框，最後子元素的右邊緣被放在右側（首個子元素前是全部剩餘的空間）。
  對於相反方向的框，首個子元素的左邊緣被放在左側（最後子元素後是全部剩餘的空間）。
center:
   均等地分割多餘空間，其中一半空間被置於首個子元素前，另外一半被置於最後一個子元素後.
justify:
   在每一個子元素之間分割多餘的空間（首個子元素前和最後一個子元素後沒有多餘的空間）。

2.box-align 屬性(垂直方向上的對齊方式)
box-align定義子元素交叉軸對齊方式。

.box{
    -moz-box-align: center; /*Firefox*/
    -webkit-box-align: center; /*Safari,Opera,Chrome*/
    box-align: center;
}

box-align屬性總共有5個值：

.box{
    box-align: start | end | center | baseline | stretch;    /*交叉軸對齊：頂部對齊（默認） | 底部對齊 | 居中對齊 | 文本基線對齊 | 上下對齊並鋪滿*/}

各個值的含義以下：
start:
   對於正常方向的框，每一個子元素的上邊緣沿着框的頂邊放置。
   對於反方向的框，每一個子元素的下邊緣沿着框的底邊放置。
end:
   對於正常方向的框，每一個子元素的下邊緣沿着框的底邊放置。
   對於反方向的框，每一個子元素的上邊緣沿着框的頂邊放置。
center:
    均等地分割多餘的空間，一半位於子元素之上，另外一半位於子元素之下。
baseline:
    若是 box-orient 是inline-axis或horizontal，全部子元素均與其基線對齊。
stretch:
   拉伸子元素以填充包含塊

3.box-direction 屬性
box-direction定義子元素的顯示方向。

.box{
    -moz-box-direction: reverse; /*Firefox*/
    -webkit-box-direction: reverse; /*Safari,Opera,Chrome*/
    box-direction: reverse;
}

box-direction屬性總共有3個值：

.box{
    box-direction: normal | reverse | inherit;    /*顯示方向：默認方向 | 反方向 | 繼承子元素的 box-direction*/}

4.box-orient 屬性

box-orient定義子元素是否應水平或垂直排列。

.box{
    -moz-box-orient: horizontal; /*Firefox*/
    -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/
    box-orient: horizontal;
}

box-orient屬性總共有5個值：

.box{
    box-orient: horizontal | vertical | inline-axis | block-axis | inherit;    /*排列方向：水平 | 垂直 | 行內方式排列（默認） | 塊方式排列 | 繼承父級的box-orient*/}

horizontal: 在水平行中從左向右排列子元素。
vertical: 從上向下垂直排列子元素。
inline-axis： 沿着行內軸來排列子元素（映射爲 horizontal）。
block-axis： 沿着塊軸來排列子元素（映射爲 vertical）。
inherit： 應該從父元素繼承 box-orient 屬性的值。

5.box-lines 屬性
box-lines定義當子元素超出了容器是否容許子元素換行。

.box{
    -moz-box-lines: multiple; /*Firefox*/
    -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/
    box-lines: multiple;
}

box-lines屬性總共有2個值：

.box{
    box-lines: single | multiple;    /*容許換行：不容許（默認） | 容許*/}

single：伸縮盒對象的子元素只在一行內顯示
multiple：伸縮盒對象的子元素超出父元素的空間時換行顯示

6.box-flex 屬性。
box-flex定義是否容許當前子元素伸縮。

.item{
    -moz-box-flex: 1.0; /*Firefox*/
    -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/
    box-flex: 1.0;
}

box-flex屬性使用一個浮點值：

.item{
    box-flex: <value>;    /*伸縮：<一個浮點數，默認爲0.0，即表示不可伸縮，大於0的值可伸縮，柔性相對>*/}

7.box-ordinal-group 屬性
box-ordinal-group定義子元素的顯示次序，數值越小越排前。

.item{
    -moz-box-ordinal-group: 1; /*Firefox*/
    -webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/
    box-ordinal-group: 1;
}

box-direction屬性使用一個整數值：

.item{
    box-ordinal-group: <integer>;    /*顯示次序：<一個整數，默認爲1，數值越小越排前>*/}

新版語法以下：

定義容器的display屬性：

.box{
    display: -webkit-flex; /*webkit*/
    display: flex;
}/*行內flex*/.box{
    display: -webkit-inline-flex; /*webkit*/
    display:inline-flex;
}

容器樣式

.box{
    flex-direction: row | row-reverse | column | column-reverse;    /*主軸方向：左到右（默認） | 右到左 | 上到下 | 下到上*/
    
    flex-wrap: nowrap | wrap | wrap-reverse;    /*換行：不換行（默認） | 換行 | 換行並第一行在下方*/

    flex-flow: <flex-direction>  <flex-wrap>;    /*主軸方向和換行簡寫*/

    justify-content: flex-start | flex-end | center | space-between | space-around;    /*主軸對齊方式：左對齊（默認） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分佈*/

    align-items: flex-start | flex-end | center | baseline | stretch;    /*交叉軸對齊方式：頂部對齊（默認） | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文本基線對齊*/

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;    /*多主軸對齊：頂部對齊（默認） | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 上下平均分佈*/}

 

flex-direction值介紹以下：
    row: 默認值。靈活的項目將水平顯示，正如一個行同樣。
    row-reverse: 與 row 相同，可是以相反的順序。
    column: 靈活的項目將垂直顯示，正如一個列同樣。
    column-reverse: 與 column 相同，可是以相反的順序。

flex-wrap 值介紹以下:
    nowrap: flex容器爲單行。該狀況下flex子項可能會溢出容器。
    wrap: flex容器爲多行。該狀況下flex子項溢出的部分會被放置到新行，子項內部會發生斷行。
     wrap-reverse： 換行並第一行在下方

flex-flow值介紹以下(主軸方向和換行簡寫)：
    <flex-direction>: 定義彈性盒子元素的排列方向
    <flex-wrap>：控制flex容器是單行或者多行。

justify-content值介紹以下：
    flex-start: 彈性盒子元素將向行起始位置對齊。
    flex-end: 彈性盒子元素將向行結束位置對齊。
    center: 彈性盒子元素將向行中間位置對齊。
    space-between: 第一個元素的邊界與行的主起始位置的邊界對齊，同時最後一個元素的邊界與行的主結束位置的邊距對齊，
而剩餘的伸縮盒項目則平均分佈，並確保兩兩之間的空白空間相等。

space-around: 伸縮盒項目則平均分佈，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最後一個元素後的空間爲其餘空白空間的一半。

align-items值介紹以下:
   flex-start: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
   flex-end: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
   center: 彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
    baseline: 如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
   stretch: 若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。

align-content值介紹以下:
    flex-start: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
    flex-end: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
    center: 彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
    space-between: 第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，
剩餘的行則按必定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。
   space-around: 各行會按必定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其餘空間的一半。
   stretch: 各行將會伸展以佔用剩餘的空間。若是剩餘的空間是負數，該值等效於'flex-start'。在其它狀況下，剩餘空間被全部行平分，以擴大它們的側軸尺寸。

子元素屬性

.item{
    order: <integer>;    /*排序：數值越小，越排前，默認爲0*/

    flex-grow: <number>; /* default 0 */
    /*放大：默認0（即若是有剩餘空間也不放大，值爲1則放大，2是1的雙倍大小，以此類推）*/

    flex-shrink: <number>; /* default 1 */
    /*縮小：默認1（若是空間不足則會縮小，值爲0不縮小）*/

    flex-basis: <length> | auto; /* default auto */
    /*固定大小：默認爲0，能夠設置px值，也能夠設置百分比大小*/

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]    /*flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto，*/

    align-self: auto | flex-start | flex-end | center | baseline | stretch;    /*單獨對齊方式：自動（默認） | 頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文本基線對齊*/}

兼容寫法

1. 首先是定義容器的 display 屬性：

.box{
    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+ */}

這裏還要注意的是，若是子元素是行內元素，在不少狀況下都要使用 display:block 或 display:inline-block 
把行內子元素變成塊元素（例如使用 box-flex 屬性），這也是舊版語法和新版語法的區別之一。

2. 子元素主軸對齊方式（水平居中對齊）

.box{
    -webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}

兼容寫法新版語法的 space-around 是不可用的：以下新版語法space-around;

.box{
    box-pack: start | end | center | justify;    /*主軸對齊：左對齊（默認） | 右對齊 | 居中對齊 | 左右對齊*/

    justify-content: flex-start | flex-end | center | space-between | space-around;    /*主軸對齊方式：左對齊（默認） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分佈*/}

3. 子元素交叉軸對齊方式（垂直居中對齊）

.box{
    box-align: start | end | center | baseline | stretch;    /*交叉軸對齊：頂部對齊（默認） | 底部對齊 | 居中對齊 | 文本基線對齊 | 上下對齊並鋪滿*/

    align-items: flex-start | flex-end | center | baseline | stretch;    /*交叉軸對齊方式：頂部對齊（默認） | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文本基線對齊*/}

4. 子元素的顯示方向。

子元素的顯示方向可經過 box-direction + box-orient + flex-direction 實現，以下代碼：
1. 左到右(水平方向)

.box{
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

2. 右到左(水平方向)

.box{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

如上代碼：box 寫法的 box-direction 只是改變了子元素的排序，並無改變對齊方式，須要新增一個 box-pack 來改變對齊方式。

3. 上到下(垂直方向上)

.box{
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

4. 下到上（垂直方向上）

.box{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

5. 是否容許子元素伸縮

.item{
    -webkit-box-flex: 1.0;
    -moz-flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

box語法中 box-flex 若是不是0就表示該子元素容許伸縮，而flex是分開的，上面 flex-grow 是容許放大（默認不容許）

.item{
    -webkit-box-flex: 1.0;
    -moz-flex-shrink: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
}

flex-shrink 是容許縮小（默認容許）。box-flex 默認值爲0，也就是說，在默認的狀況下，在兩個瀏覽器中的表現是不同的：
介紹以下：

.item{
    box-flex: <value>;    /*伸縮：<一個浮點數，默認爲0.0，即表示不可伸縮，大於0的值可伸縮，柔性相對>*/

    flex-grow: <number>; /* default 0 */
    /*放大：默認0（即若是有剩餘空間也不放大，值爲1則放大，2是1的雙倍大小，以此類推）*/

    flex-shrink: <number>; /* default 1 */
    /*縮小：默認1（若是空間不足則會縮小，值爲0不縮小）*/}

6. 子元素的顯示次序

.item{
    -webkit-box-ordinal-group: 1;
    -moz-order: 1;
    -webkit-order: 1;
    order: 1;
}