css3弹性盒子（flex）

    <!--1 父级别-->
<!--display:flex;  //块-->
<!--display:inline-flex;//内联-->

<!--1.1 flex-direction(父)规定子元素排列方式-->
<!--row   从左到右-->
<!--row-reverse  翻转，反向-->
<!--column  纵轴排列-->
<!--1.2 flex-wrap(父)-->
<!--nowarp 不换行，当一行排列不完时候-->
<!--warp  换行-->

<!--1.3 flex-flow(复合属性）-->
<!--flex-direction  flex-warp-->

<!--2 justify-content(父)-->
<!--规定子元素在父元素里横轴的对齐方式-->
    <!--align-content-->
    <!--规定几个子元素在父元素里当一排放不下，竖排排列时候的对齐方式,子元素必须是宽度百分百，父元素要设置换行warp（子元素纵向排列）-->
<!--flex-start 左对齐-->
<!--flex-end  右对齐-->
<!--center  居中-->
<!--space-between 两边紧凑，各子元素等间距。-->
<!--space-around  各子元素左右等间距-->

<!--3align-items(父)-->
<!--规定整体子元素在纵轴上的对其方式（每个子元素横向排列）-->
<!--flex-satrt 顶部对其-->
<!--flex-end 底部对其-->
<!--center  居中-->
<!--stretch 高度自动盛满父元素-->

<!--flex(子)-->
<!--规定子元素在父元素所占比例数-->

<!--align-self (子)-->
<!--子元素在纵轴上的对其方式-->
<!--flex-satrt 顶部对其-->
<!--flex-end 底部对其-->
<!--center  居中-->
<!--stretch 高度自动盛满父元素-->

<!--order: 规定子元素排列顺序-->
<!--数值越小排在越前面。 数值大排在后面-->