flex布局有主軸和側(cè)軸兩個軸（main axis和cross axis），這兩個軸是可以互換的。
默認(rèn)情況下，主軸是整個容器的寬，側(cè)軸是高。
flex容器的所有屬性，即父容器
flex-direction：設(shè)置主軸為容器的寬或高，側(cè)軸與之相應(yīng)的改變，控制flex項目的排序
主軸和側(cè)軸是可以通過flex-direction屬性來定義的。對應(yīng)的屬性如下：
flex-direction : row ; ? //默認(rèn)值，主軸為寬，從左往右
flex-direction : row-reverse ; ?//主軸為寬 ， 從右往左，包括div的排列順序也會倒置，從右往左排起
flex-direction : column ; ? //主軸為高，側(cè)軸為寬，從上往下
flex-direction : column ; ? //主軸為高，側(cè)軸為寬，從下往上，div排列順序也倒置
justify-content ： 主軸對齊（針對主軸），控制flex項目的對齊形式
先要清楚設(shè)定的主軸是什么，再來設(shè)置這個屬性，屬性值如下：
justify-content : flex-start ? //默認(rèn)值，按照flex-direction設(shè)置的主軸順序?qū)R排列
justify-content : flex-end? //按照flex-direction設(shè)置的主軸順序的結(jié)尾進(jìn)行對齊排列
justify-content : center ?//中間點向兩邊延伸對齊
justify-content : space-between //在主軸上，即布局方式的兩端作為同時開始的位置，向中間排列，每個子元素之間的間隔相等
justify-content : space-around //每個子元素兩邊都擁有相等間隔，且子元素彼此的間隔不會重疊，所以子元素之間的間隔比子元素與邊框的間隔大一倍
align-items ：側(cè)軸對齊，和 justify-content 主軸對齊的原理一樣
先要清楚設(shè)定的側(cè)軸是什么，再來設(shè)置這個屬性，屬性值如下：
align-items : flex-start ; ? //默認(rèn)值??
align-items : flex-end ;?
align-items : center; ? //側(cè)軸上居中對齊
align-items : baseline ;? //伸縮flex項目與它們的基線對齊，即第一行文字的基線對齊
align-items : stretch ;? //將伸縮flex項目從側(cè)軸起點拉伸到側(cè)軸終點
flex-wrap : 伸縮flex項目在主軸上的換行方式
每個伸縮容器都有且只有一個伸縮行。使用flex-wrap你可以為伸縮容器創(chuàng)建多個伸縮行。
對應(yīng)的屬性值如下：
flex-wrap : nowrap? //不換行? （默認(rèn)值）
flex-wrap : wrap ?//換行，第一行在上方(這里指的主軸為寬時，當(dāng)為高時，左右之分)
flex-wrap : wrap-reverse? // 換行，第一行在下方(這里指的主軸為寬時，當(dāng)為高時，左右之分)
align-content ： 堆棧伸縮行，對齊的不是伸縮flex項目，而是整個主軸行
align-content會更改flex-wrap的行為。它和align-items相似，但是不是對齊伸縮項目，它對齊的是伸縮行。
對應(yīng)的屬性值：
align-content ： stretch
align-content ：flex-start
align-content ：flex-end
align-content ：center
align-content ：space-between
align-content ：space-around
flex-flow ：設(shè)置主軸與換行
flex-flow: [flex-direction] [flex-wrap]
flex項目的所有屬性，即子元素的屬性
order : 設(shè)置flex項目的顯示順序
設(shè)置伸縮項目的 order 可以調(diào)整它們渲染時的順序
order : 0 ; //默認(rèn)值為0， 數(shù)值越小，越靠前，可以設(shè)置負(fù)數(shù)
align-self : 側(cè)軸對齊
允許單個子元素與其他子元素不一樣的對齊方式，可以覆蓋父元素設(shè)定的align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同stretch（填充滿）
align-self : stretch ; //填充滿真?zhèn)€側(cè)軸
align-self : flex-start ; ? //以側(cè)軸的開始頭對齊
align-self : flex-end ; //以側(cè)軸的末尾對齊
align-self : center ; ?//以側(cè)軸的中點對齊
align-self? : baseline ;? //伸縮flex項目與它們的基線對齊，即第一行文字的基線對齊
flex-grow? //定義子元素的放大比例，默認(rèn)為0（不放大），前提是父容器有 ? ? ? ? ? ? ? ? ? ? 空余空間
flex-shrink? //定義子元素的縮小比例，默認(rèn)值為1，不能為負(fù)數(shù)，前提是父 ? ? ? ? ? ? ? ? ? ? ? 容器有空余空間
flex-basis ?//在子元素分配空余空間前，設(shè)定指定的子元素的空間大小，默 ? ? ? ? ? ? ? ? ? ? ? 認(rèn)auto（原值）
flex : 伸縮性，是flex-grow ? flex-shrink ? flex-basis 三部分的合并
flex ：flex-grow ?[flex-shrink] ?[flex-basis] //后兩者為可選擇填寫
當(dāng) flex ：number 時，其實設(shè)置的就是flex-grow，默認(rèn)值是0，表示不放大，不參與伸縮
flex: 0 ? ?//表示不放大，不參與伸縮，需要給該項目設(shè)置寬度，最好給一個flex-basis設(shè)置它的主 ? ? ? ? ? ? ? 軸寬度
當(dāng) flex : 2 時，就是把所有flex不為0的可伸縮項目的數(shù)值加起來設(shè)為count，則該flex：2的項 目，所占的剩余的全部空間的2/count大小
flex: none ? ?//一個flex屬性值被設(shè)為none的伸縮項目，在任何情況都不會發(fā)生伸縮。
flex: initial ? // 一個flex屬性值被設(shè)為initial的伸縮項目，在有剩余空間的情況下不會有任何變 ? ? ? ? ? ? ? ? ? ? ? ? ?化，但是在必要的情況下會被收縮。
注意：
多列組中所有column-*屬性、float、clear、vertical-align屬性在flex容器上沒有作用
