flex 容器屬性
1、flex-direction // 決定了主軸方向 flex-direction：row 橫向X 從左往右排列 flex-direction：row-revers橫向X 從右往左排列 flex-direction：column 縱向Y 從上往下排列 flex-direction：row-revers 縱向Y 從下往上排列
2、flex-wrap 父級設定 flex-wrap:nowrap; //不換行,子級如果設定了寬度會改變子級的寬度,自適應 flex-wrap:wrap; //自動換行,根據子元素的寬度，如果父級寬度不夠就留白 flex-wrap:wrap-reverse;//自動換行上下切換
注： flex-flow 是flex-direction和flex-wrap的縮寫 例：flex-flow:column wrap;
3、justify-content justify-content:flex-start;//左側對齊 justify-content:flex-end;//右側對齊 justify-content:center;//居中對齊 可以實現無寬高元素相對父級左右居中 justify-content:space-between;//兩端對齊 元素之間的空格相等（前提是子元素的總寬度沒有父級的寬，要不就沒有空間了）； justify-content:space-around;每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
4、 align-items 屬性定義專案在交叉軸上如何對齊。 align-item:flex-start; //自父元素自左往右自上往下排列 align-item：flex-end;//靠下自左往右排列 align-item:baseline;// 所有子元素文字以第一個子元素的文字底部基線對齊，即使元素高度不同， 文字底部基線強制一致 （也就是說即使子元素自身的高度不同 文字也會在一條直線上）; align-item:stretch;（是一個預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。 align-item:center;// 垂直居中‘ 注： align-item:center;(垂直居中) 與 justify-content:center;(左右居中)配合可實現單個子元素相對於父級元素上下左右居中（未設定寬高也可以） align-content
5、align-content //適用於多列布局 flex-start：//自父元素自左往右自上往下排列 flex-end：與交叉軸的終點對齊。 center：與交叉軸的中點對齊。 space-between：如果三列布局 上下兩列的靠上靠下中間一列居中 與上下間隔相對。 space-around：上下軸線兩側(不靠邊框側)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 stretch（預設值）：軸線佔滿整個交叉軸。
四、專案的屬性
以下6個屬性設定在專案上。
order flex-grow flex-shrink flex-basis flex align-self
----------未完待總結
flex實現左側固定右邊自適應 和 兩側固定 中間自適應 程式碼如下