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