弹性盒模型

新版：

　　父元素：dispaly:flex

　　主轴方向设置：flex-direction:row(水平方向，默认)  flex-direction:column(垂直方向)

　　主轴上元素方向排列设置：flex-direction:row-reverse (水平居右，从右往左排)   flex-direction:column-reverse(垂直居下, 从下往上排)

　　主轴上元素开始位置：justify-content:flex-start(元素在主轴开始位置，余下空间在结束位置)

　　　　　　　　　　　　justity-content:flex-end(元素在主轴结束位置，余下空间在开始位置)　

 　　　　　　　　　　　  justity-content:center(元素在主轴中间位置，余下空间在两侧位置)

　　　　　　　　　　　　justity-content:space-bwtten(元素平均分配主轴空间，余下空间在元素之间位置)

　　　　　　　　　　　　justity-content:space-around(元素平均分配主轴空间，余下空间在元素两侧位置)

 

　　纵轴上元素开始位置：align-item:flex-start(元素在纵轴开始位置，余下空间在结束位置)

　　　　　　　　　　　　align-item:flex-end(元素在纵轴结束位置，余下空间在开始位置)　

 　　　　　　　　　　　  align-item:center(元素在纵轴中间位置，余下空间在两侧位置)

　　　　　　　　　　　　align-item:baseline(元素平均分配纵轴空间，余下空间在元素之间位置)

　　　　　　　　　　　　align-item:stretch(元素平均分配纵轴空间，余下空间在元素两侧位置)

 

 

 　　加在子级元素上：

　　根据父级宽度平均分配子级宽度：flex-grow:1;

　　子级元素排列顺序：order:1(数值越小越靠前，可以接受任意值)

　　　　　　　　　　　

 

 

旧版：

　　浏览器前缀以 webkit为例

　　父元素：dispaly:webkit-box

　　主轴方向设置：webkit-box-orient:horizontal;(水平方向，默认)  webkit-box-orient:vertical(垂直方向)

　　主轴上元素方向排列设置：webkit-box-orient:reverse (水平居左，从右往左排)   flex-box-orient:reverse(垂直居顶, 从下往上排)

　　主轴上元素开始位置：webkit-box-pack:start(元素在主轴开始位置，余下空间在结束位置)

　　　　　　　　　　　　webkit-box-pack:end(元素在主轴结束位置，余下空间在开始位置)　

 　　　　　　　　　　　  webkit-box-pack:center(元素在主轴中间位置，余下空间在两侧位置)

　　　　　　　　　　　　webkit-box-pack:justify(元素平均分配主轴空间，余下空间在元素之间位置)

　　纵轴上元素开始位置：webkit-box-align:flex-start(元素在纵轴开始位置，余下空间在结束位置)

　　　　　　　　　　　　webkit-box-align:flex-end(元素在纵轴结束位置，余下空间在开始位置)　

 　　　　　　　　　　　  webkit-box-align:center(元素在纵轴中间位置，余下空间在两侧位置)

 

　　加在子级元素上：

　　根据父级宽度平均分配子级宽度：-webkit-box-flex:1;

　　子级元素排列顺序：-webkit-box-ordinal-group:1(数值越小越靠前，最小值1)