採用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱"專案"。容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
1.flex-directon屬性：表示專案的排列方式或者說主軸的方向，有以下四個值
row:預設值，主軸為水平方向，從左向右排列
row-reverse:主軸為水平方向，從右向左排列
column:主軸為垂直方向，從上往下排列
column-reverse:主軸為垂直方向，從下往上排列
2.flex-wrap屬性：預設情況，所有的子元素都在一行，此屬性主要定義如果不在一行時子元素如何排列，有如下三個值：
nowrap：不換行
wrap：換行
wrap-reverse：換行，第一行在下方，第二行在第一行上面依次類推
3.flex-flow：集1.和2.屬性於一身，意思就是這個屬性可以直接指定上面兩個屬性的值，預設值為：row nowrap
4.justify-content：定義子元素在主軸上的對齊方式，有以下五個值：
flex-start：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊
space-around：每個專案兩側間隔相等
5.align-items屬性：定義子元素在水平軸和垂直軸的交叉軸上如何對齊，有以下五個值：
flex-start：交叉軸的起點對齊
flex-end：交叉軸的終點對齊
center：交叉軸的中點對齊
baseline：專案的第一行文字基線對齊
strecth:預設
6.algin -content屬性：定義多根軸線的對齊方式，如果專案只有一根軸線，則該屬性不起作用，該屬性有以下六個值：
flex-start：交叉軸的起點對齊
flex-end：交叉軸的終點對齊
center：交叉軸的中點對齊
space-between：與交叉軸的兩端對齊，軸線間的間隔平均分布
space-around：每根軸線的兩側的間隔都相等
strecth：預設，軸線佔滿整個交叉軸
1.order屬性：定義子元素的排列順序，數值越小，排列越靠前，預設為0
2.flex-grow屬性：定義專案的放大比例，預設值是0，就是如果存在剩餘空間，也不放大。
若所有子元素的flex-grow值為1，則子元素等分剩下的空間
若乙個元素的屬性值為n，剩下值為1，則屬性值為n的元素等分的空間是1的n倍
3.flex-shrink屬性：定義了專案的縮小比例，預設為1，就是如果空間不足，該專案將縮小
若所有子元素此屬性為1，空間不足時，將會被等比縮小，
若有元素屬性值為0，即使空間不足，也不會被縮小
4.flex-basis屬性：定義了在分配多餘空間之前，專案佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto原本的大小，也可以設定px結尾固定大小
5.flex屬性：是2.3和4屬性的簡寫，預設值為：0 1 auto，可以只寫第乙個值，後面兩個是可選引數；該屬性的兩個快捷值：auto（1 1 auto）和none（0 0 auto）
6.align-self屬性：此屬性允許單個子元素與其他子元素不一樣的對齊方
auto：預設值，表示繼承父元素的屬性，
其他：align-items值相同
學習參照**：
CSS中的display屬性的flex布局
display flex flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float clear和vertical align屬性將失效。它即可以應用於容器中，也可以應用於行內元素。基本概念 採用flex布局的元素，稱為flex...
css3中的display屬性 flex布局
1 container編譯之後的效果很明顯，介面的布局也很合理，看起來很清晰。那麼究竟這個屬性是幹嘛用的呢？flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...
display的flex屬性使用詳解
flex的相容性在pc端還算闊以，但是在移動端，那就呵呵了。今天我們只是學習學習，忽略一些不重要的東西。首先flex的使用需要有乙個父容器，父容器中有幾個items.父容器 container 屬性 display flex flex塊級，inline flex 行內快 justify conten...