• flex主要用于響應式頁面設計，兼容各種寬度的設備
  flex布局寫法：

div{
display:flex;
}

行內元素flex布局：

span{
display:inline-flex;
}

webkit內核的瀏覽器，必須加上-webkit-前綴

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效

• flex布局的六個屬性
  | flex-direction | flex-wrap | flex-flow | justify-content | align-items| align-content |

flex-direction

[flex-direction]屬性用來控制上圖中伸縮容器中主軸的方向，同時也決定了伸縮項目的方向。

• flex-direction:row;也是默認值，即主軸的方向和正常的方向一樣，從左到右排列。
• flex-direction:row-reverse;和row的方向相反，從右到左排列。
• flex-direction:column;從上到下排列。
• flex-direction:column-reverse;從下到上排列。 以上只針對ltr書寫方式，對于rtl正好相反了。

網頁展示效果如下：

主軸方向示意圖

flex-wrap

[flex-wrap]屬性控制伸縮容器是單行還是多行，也決定了側軸方向（新的一行的堆放方向）。

• flex-wrap:nowrap;伸縮容器單行顯示，默認值；
• flex-wrap:wrap;伸縮容器多行顯示；伸縮項目每一行的排列順序由上到下依次。
• flex-wrap:wrap-reverse;伸縮容器多行顯示，但是伸縮項目每一行的排列順序由下到上依次排列。

網頁效果見圖：

如何換行示意圖

flex-flow

[flex-flow]屬性為flex-direction（主軸方向）和flex-wrap（側軸方向）的縮寫，兩個屬性決定了伸縮容器的主軸與側軸。

• flex-flow:[flex-direction][flex-wrap];默認值為row nowrap；

舉兩個栗子：

1. flex-flow:row;也是默認值；主軸是行內方向，單行顯示，不換行；
2. flex-flow:row-reverse wrap;主軸和行內方向相反，從右到左，項目每一行由上到下排列（側軸）。

網頁效果如下：

主軸方向與換行示意圖

justify-content

justify-content屬性定義了項目在主軸上的對齊方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

主軸對齊方式示意圖

align-items

[align-items]用來定義伸縮項目在側軸的對齊方式，這類似于[justify-content]屬性，但是是另一個方向。（flex-directon和flex-wrap是一對，justify-content和align-items是一對，前者分別定義主軸和側軸的方向，后者分別定義主軸和側軸中項目的對齊方式）。

• align-items:flex-start;伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起點的邊。
• align-items:flex-end;伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊。
• align-items:center;伸縮項目的外邊距在側軸上居中放置。
• align-items:baseline;如果伸縮項目的行內軸與側軸為同一條，則該值與[flex-start]等效。 其它情況下，該值將參與基線對齊。

• align-items:stretch;伸縮項目拉伸填充整個伸縮容器。此值會使項目的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下盡可能接近所在行的尺寸。

  
  
  側軸對齊方式示意圖

align-content

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用
相當于同時在主軸和側軸上設置對齊方式

主軸+側軸

flex項目

終于寫到關于伸縮項目的相關屬性了，主要是3個，order，flex（flex-grow，flex-shrink，flex-basis的組合），align-self；用來比較多的是前兩個。

order

有一種用法比較多，想設置一組中有兩個元素一個排第一，另外一個排最后，只需要將第一個的order:-1；另一個為order:0;這樣就好了。

譬如我們想控制一個container中有4個box，想box4為第一個顯示，box1為最后一個顯示。只需要 這樣

<style>
.container{
        display: flex;
    }
    .box1{
        order:1;
    }
    .box4{
        order:-1;
    }
</style>
<div class="container">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
</div>

排序示意圖

flex

[flex]屬性可以用來指定可伸縮長度的部件，是flex-grow（擴展比例）,flow-shrink（收縮比例）,flex-basis（伸縮基準值）這個三個屬性的縮寫寫法，建議大家采用縮寫的方式而不是單獨來使用這3個屬性。

• flex:none | [ <'flex-grow'> ?<'flew-shrink'> || <'flow-basis'>]
  // flex-grow是必須得flex-shrink和flow-basis是可選的

• flex-grow:;其中number作為擴展比例，沒有單位，初始值是0，主要用來決定伸縮容器剩余空間按比例應擴展多少空間。

• flex-grow:;其中number作為收縮比例，沒有單位，初始值是1，也就是剩余空間是負值的時候此伸縮項目相對于伸縮容器里其他伸縮項目能收縮的空間比例，在收縮的時候收縮比率會以[flex-basis]伸縮基準值加權。

• flex-basis:|auto;默認是auto也就是根據可伸縮比率計算出剩余空間的分布之前，伸縮項目主軸長度的起始數值。若在「flex」縮寫省略了此部件，則「flex-basis」的指定值是長度零。

分配多余空間

align-self

[align-self]用來在單獨的伸縮項目上覆寫默認的對齊方式，這個屬性是用來覆蓋伸縮容器屬性align-items對每一行的對齊方式。也就是說在默認的情況下這兩個值是相等的。

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