dispaly:flex; 块元素
display:inline flex;行内块元素
子元素设置flex模型以后不能使用float，定位仍然可用。
设置主轴方向
flex-direction：row;（默认不换行，从左到右）
flex-direction:row-reverse;(颠倒主轴顺序，从右到左）
flex-direction:column;（设置主轴从上到下，变换了主轴方向）
flex-direction:column-reverse;（设置主轴从下到上)
换行
flex-wrap:nowrap;
flex-wrap:warp; （换行，从左到右）
flex-wrap:warp-reverse;（换行，并且第一行和第二行颠倒）
复合属性以及写法
flex-flow是flex-direction和flex-warp的简写形式，默认值为flex-flow: row nowrap;
定义了项目在主轴上的对齐方式（应为你的主轴是水平方向的 ）
/* justify-content: flex-start; */ /* 左对齐 */
/* justify-content: flex-end; */ /* 右对齐 */
/* 所以 justify-content: center 表示水平方向居中*/
/* flex布局不像绝对定位，脱离文档流，flex布局设置了还是会遵守文档流布局 */
/* 子元素靠边对齐 两端对齐，项目之间的间隔都相等*/
/* justify-content: space-between; */
/* 子元素 左右的距离保持一样 相邻子元素之间的距离会变成2倍*/
/* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */
/* justify-content: space-around; */
/* 子元素相邻的距离保持一致 */
/* justify-content: space-evenly; */
定义项目在交叉轴上对齐方式
/* 垂直方向居中 */
/* align-items: center; */
/* 垂直方向的顶部 交叉轴的起点对齐 */
/* align-items:flex-start; */
/* 垂直方向的底部 交叉轴的终点对齐*/
/* align-items: flex-end; */
/* baseline: 项目的第一行文字的基线对齐 */
/* 垂直方向按照子元素的文字所在的底部位置进行对齐 */
/* align-items: baseline; */
*stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度*/
/* align-items: stretch; */
