基本彈性盒模型演示

div{
    display:flex;
    width:600px;
    border:1px solid red;
}
p{
    height:200px;
    border:1px solid blue;
}

任何元素都可以設定display:flex;因為所有元素意義上都是盒子

display:inline-flex

和flex的區別 是flex佔據一行，inline­flex佔據自己應該佔據的位置！有點像inline­block 不支援margin auto,支援text­align

給伸縮容器的屬性

彈性盒模型主要就分為 “伸縮容器”和“伸縮專案” 伸縮容器我們可以簡單的理解為彈性盒模型父元素！反之伸縮專案就是彈性盒模型的子元素！

1. 主軸方向（伸縮流方向） fiex-direction

div{
    flex-direction:row; /*預設*/
    flex-direction:row-reverse; /*水平反向*/
    flex-direction:column; /*豎直*/
    flex-direction:column-reverse; /*垂直反向*/
}

2. 交叉軸的方向 flex-wrap 規定伸縮專案是否（子元素）換行

div{
    flex-wrap:nowrap; /* 預設 不換行*/
    flex-wrap:wrap; /*換行*/
    flex-wrap:wrap-reverse; /*反向換行*/
   }
 

flex-flow

fiex-direction 和  flex-wrap 組成一個複合屬性：

div{
    flex-flow:row-reverse wrap; /*反向水平 換行*/
}

3. 伸縮專案在主軸對齊方式 justify-content

div{
    justify-content:flex-start; /*預設 主軸的起點*/
    justify-content:flex-end; /*主軸的終點*/
    justify-content:center; /*在主軸的中部對齊！整體居中*/
    justify-content:space-between; /*兩端對齊，軸線之間的間隔平均分佈*/
    justify-content:space-around; /*每個專案兩側的間隔都相等*/
}
 

4. 伸縮專案在伸縮容器的單行交叉軸的對齊方式 align-items :單行時候設定

div{
    align-items:stretch; /*預設 不設定專案高度的時候佔滿整個容器的高度*/
    align-items:flex-start; /*側軸的起點對齊*/
    align-items:flex-end; /*側軸的終點對齊*/
    align-items:center; /*中間對齊*/
    align-items:baseline; /*專案的第一行文字的基線對齊。*/
}

5. 多行伸縮專案 對交叉軸的對齊方式。如果專案只有一根軸線，該屬性不起作用align-content

注意：多行當使用align­content 不要和align­items共存

div{
    align-content：stretch; /*預設值 不設定高度的時候軸線佔滿整個交叉軸。*/
    align-content：flex-start; /*與交叉軸的起點對齊。*/
    align-content：flex-end; /*與交叉軸的終點對齊。*/
    align-content：center; /*與交叉軸的中點對齊。*/
    align-content：space-between; /*與交叉軸兩端對齊，軸線之間的間隔平均分佈。*/
    align-content：space-around; /*每根軸線兩側的間隔都相等。*/
}

給伸縮專案（子級）的屬性

1  order:1; 伸縮專案的排列順序。

order:1;/*預設為0 整數 可以為負值 數值越小，排列越靠 前*/

2 flex-grow: 指定了該專案應該佔用的伸縮容器內的多少空間。

flex­grow:1;預設是0 單位是數字 沒有單位 不支援負值 
值為1的時候 佔 一份 
其中有一個值為2的時候 大小將是1的兩倍

3 flex-shrink 當Flex專案的總大小大於Flex容器時，Flex專案將縮小以根據編號填充容器。

flex­shrink預設屬性為1，當空間不足時，都將等比例縮小。 不支援負值 
如果一個專案的flex­shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。 
如果所有專案的flex­shrink屬性都為1，其中一個專案的flex­shrink屬性為3，當空間不足時，為3的
這個專案會縮小的更多，縮小的部分會平分給等於1的盒子

總結：值越小縮小的越少，越大縮小的越多

4 flex-basis 設定專案的初始長度

給flex­basis只是初始值，以後會隨著內容的變化吧盒子撐大 
可以理解為盒子的寬度，當我們他的值是auto時，盒子的寬度取決於width

flex-basis:100px; /*預設值為auto：自適應內容撐開*/

5 flex簡寫屬性

flex屬性是flex­grow, flex­shrink 和 flex­basis的簡寫，預設值initial可以表示為0 1 auto 
flex: auto 它代表 1 1 auto. auto 是有內容的撐開之後，剩下的空間幾個盒子平分！ 
flex:none  0 0 auto 是內容的寬度！ 不放大 不縮小 自動 
flex:1  是平分盒子，每個盒子佔多少分之一 代表 1 1 0 放大 縮小 自動.
如果你想讓元素僅僅使用它本身的寬度，比如按鈕，則設定 flex: none，none 將會被解釋為 0 0 auto. 
如果想要一個固定大小的元素，則設定 flex: 0 0 size。如：flex 0 0 60px。 
如果你想讓元素自動擴充套件到可以利用的空間，如果有多個這種型別的元素，它們可以平均分配空間，則設定flex: auto

6 align-self 屬性允許單個專案與其他專案不一樣的對齊方式

可覆蓋align­items屬性。預設值為auto，表示繼承父元素的align­items屬性，如果沒有父元素，則等同於stretch。

flex-start; /*交叉軸的起點對齊。*/
flex-end; /*交叉軸的終點對齊。*/
center; /*交叉軸的中點對齊。*/
baseline; /*專案的第一行文字的基線對齊。*/
stretch; /*（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。*/