CSS3彈性盒模型flex box快速入門 2016.03.16

爲了作移動端的前端項目開始學flex啦～！用了flex，不再用擔憂排版啦。一塊兒來快速上手吧！

在css上使用flex的語法

 如在下面html代碼中, ul爲父元素，li爲子元素。

< ul  class ="example" >
     < li >a </ li >
     < li >b </ li >
     < li >c </ li >  </ ul >

使用flex應在父元素中加入如下css樣式： 

.example {
    display:  flex;
    display:  ">/*  兼容chrome  */
    display:  -moc-flex; /*  兼容firefox  */
    display:  -o-flex; /*  兼容opera  */
 }   

flex-direction
(適用於父類容器元素)

flex-direction:row;

• a
• b
• c

flex-direction:row-reverse;

• a
• b
• c

flex-direction:column;

• a
• b
• c

flex-direction:column-reverse;

• a
• b
• c

flex-wrap
(適用於父類容器元素)

設置或檢索伸縮盒對象的子元素超出父容器時是否換行。
flex-wrap: nowrap | wrap | wrap-reverse

flex-wrap:nowrap;

• a
• b
• c

flex-wrap:wrap;

• a
• b
• c

flex-wrap:wrap-reverse;

• a
• b
• c

flex-flow
(適用於父類容器元素)

至關於direction和wrap的集合
flex-flow: row nowrap; /* 順序排列且不換行 */
flex-flow:row-reverse wrap; /* 反序排列且自動換行 */

justify-content
(適用於父類容器元素)

設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
justifu-content: flex-start | flex-end | center | space-between | space-around

justify-content:flex-start;

• a
• b
• c

justify-content:flex-end;

• a
• b
• c

justify-content:center;

• a
• b
• c

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

• a
• b
• c

justify-content:space-around;
space-around：彈性盒子元素會平均地分佈在行裏，兩端保留子元素與子元素之間間距大小的一半。若是最左邊的剩餘空間是負數，或該行只有一個伸縮盒項目，則該值等效於'center'。在其它狀況下，伸縮盒項目則平均分佈，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最後一個元素後的空間爲其餘空白空間的一半。

• a
• b
• c

align-items
(適用於父類容器元素)

設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
align-items: flex-start | flex-end | center | baseline | stretch

align-items:flex-start;

• a
• b
• c

align-items:flex-end;

• a
• b
• c

align-items:center;

• a
• b
• c

align-items:baseline;
baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。

• a
• b
• c

align-items:strecth;
stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。

• a
• b
• c

align-content
(適用於父類容器元素)

設置或檢索彈性盒堆疊伸縮行的對齊方式。
align-content: flex-start | flex-end | center | space-between | space-around | stretch

align-content:flex-start;

• a
• b
• c
• d
• e
• f

align-content:flex-end;

• a
• b
• c
• d
• e
• f

align-content:center;

• a
• b
• c
• d
• e
• f

align-content:space-between;

• a
• b
• c
• d
• e
• f

align-content:space-around;

• a
• b
• c
• d
• e
• f

align-content:strecth;

• a
• b
• c
• d
• e
• f

flex-grow
(適用於子元素)

設置或檢索彈性盒的擴展比率。根據彈性盒子元素所設置的擴展因子做爲比率來分配剩餘空間。flex-grow的默認值爲0，若是沒有顯示定義該屬性，是不會擁有分配剩餘空間權利的。本例中b,c兩項都顯式的定義了flex-grow，能夠看到總共將剩餘空間分紅了4份，其中b佔1份，c佔3分，即1:3
flex-grow: (default 0)

• a
• b
  flex-grow:1
• c
  flex-grow:2
• d
• e

flex-shrink
(適用於子元素)

設置或檢索彈性盒的收縮比率（根據彈性盒子元素所設置的收縮因子做爲比率來收縮空間。
flex-shrink: (default 1)

flex-basis
(適用於子元素)

設置或檢索彈性盒伸縮基準值。若是全部子元素的基準值之和大於剩餘空間，則會根據每項設置的基準值，按比率伸縮剩餘空間
flex-basis: (可百分比表示) | auto (default auto)

• a
• b
• c
  flex-basis:600px;
• d
• e

flex(複合屬性)
(適用於子元素)

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] none：none關鍵字的計算值爲: 0 0 auto [ flex-grow ]：定義彈性盒子元素的擴展比率。 [ flex-shrink ]：定義彈性盒子元素的收縮比率。 [ flex-basis ]：定義彈性盒子元素的默認基準值。